{"_id":"@chakra-ui/form-control","_rev":"481-2a26cf6e03008c536ffe9d90fcfa2193","name":"@chakra-ui/form-control","dist-tags":{"canary":"0.0.0-canary-2021118164051","pr":"0.0.0-pr-202212011232","next":"2.0.0-next.3","next-dev":"0.0.0-next-dev-202241614737","dev":"0.0.0-dev-20231109134954","latest":"2.2.0"},"versions":{"1.0.0-next.0":{"name":"@chakra-ui/form-control","version":"1.0.0-next.0","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-next.0","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e3abab7a8fc7ad5f10e64e97bd7fedc70ea00c6b","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-next.0.tgz","fileCount":15,"integrity":"sha512-H4fY0U8Gg4Rl8DV9JbSTooEkky8ZE5vCBarX2G519yuh1hOL+3sz1+66HC7qrakD63sFow9F9ikno1bE60GKYQ==","signatures":[{"sig":"MEUCIGfvsoRXahSbYmniX2mgUz6KGmDefKwIH/EnibXANhQaAiEAzFd2opQurjqXSmi4JsuYrr7zw9ypyrVg9aoFSwEY2dA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7nTbCRA9TVsSAnZWagAAD9EP/3HNNmkHyQ6UJfRMT9yJ\nxC0zD8mZiIlN8qKMG2BZsumStnJlq0zQwFjAMz1VzHYUVwPQgoqYe/tNbv4D\n/ULglyXZMNtZCecEKs/CwthPBLvcl4V92jMoVJ6ExeuDDg5zgHwJ+wvXtmLq\nEeNMr3Wyd846nfuvidksA0Q8cZRdfU/QiNjLN6HHdwm94MV9yLTlYYkmHMlV\nisrSboXeMsrFIaBjBUCZfyxRTRyuIbHc51CXEKKBc4z+rUygxqmr/v6IserD\nUBAHKyyhHi4CrBEGA4a6UUJ+oggR2Dr7uhu0+kVP8AtjTYqFF0QBnUGJ23pc\nDkVOVmJk99WdoNRNPSrb1A8NSuNCtx4XRtf01MZjLMABgM/692/tAJdsYQOS\n7XNP/ErQvVsob3Lp6Nld9gj6/wGaxNBbs81DIlwRD6yz+G6dqvPF+zjiwEW2\nPw4kBuETVUYtXst1fMYpYK46R/WN+mXVAF1UFf4Mak9XxdEWU9aiWj/UeaB7\n/WqpaIxahmDRjmASUqENK0EU8fEQvCTqqri4EcbM8hsO1J3dJ05zKp0Mp1vd\nJXUphI7qMj/V54a9V00IWmsuMI/A/VOgaPEt99JiXfZi8nGd/ttp2fTdbZiu\noehiEkR/e83PagxnhbJ22nTXHgRe5xyHFYDSEiMSUdZA550unDnTKbUjBv2l\n8YBz\r\n=oxdO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","gitHead":"ce6fe489afaddba502a2611f1fb1dcedb991325b","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.3.0+x64 (darwin)","description":"React component to provide validation states to form fields","directories":{},"_nodeVersion":"14.3.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.0","@chakra-ui/hooks":"^1.0.0-next.0","@chakra-ui/utils":"^1.0.0-next.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@chakra-ui/system":"^1.0.0-next.0"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-next.0_1592685786816_0.1929030515478105","host":"s3://npm-registry-packages"}},"1.0.0-next.1":{"name":"@chakra-ui/form-control","version":"1.0.0-next.1","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-next.1","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8f593b5d89b7f6a61a130b649579117a4b0f05cc","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-next.1.tgz","fileCount":16,"integrity":"sha512-74m6sa1SR5vjCEjjrwiQpC3QR+sp432pcDVSF9c8UN9+JRDOTCosH9YxhQwZ8+hmFR5QHDtnu38/LlPyQes3Sw==","signatures":[{"sig":"MEUCIQDSI6/RuRaTAAJI90znK68268Hqr8hhMgg0hn4FXXo0UwIgZm5AOpHL3bg4STB4qN/ZhANhZVtANCXH3K4SoiHdBOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7ytHCRA9TVsSAnZWagAAP6wP/Azro7ibjU/KxS+zw61d\nXbK/EImLs0SN14Q4WEmnq+GAHzFn6UIlQR23Yu8R+d7Lc7+cmWVT+VnpAlYg\nrWsJ8Vqmv+GEaXej/9nJ5fw59tfstWksZz6AxOcPdc/f8ENcco9TJCE17DTN\nIRS26zyI3453Rm3ol6MQwMIulesFFG+cF2Ec2omm28Hla5wliNWr2OUPzNSb\nVUFQkzmorwGapdBtZezJokOl2KZ2T//90rEbNfT5RGSXjTDBFbEuzcQezKdt\nnc+72Fd6Gun8Gov3CEUzft70AC1vTrjhkXYUHPoZyQSfj20ZJ7JNLGvHn7M2\nzCN9SZS53BbqIml6kZNjrGVNWk9JQONWGP6fDpH3pvbicB7ur3Aco5JV4VZO\nxIlYGmt1s1yI/5AG5dzp4iSZtN8gH2ge4/YnG2vxoBxlYje6FLxIo2e2AuEJ\ncRQJ93z0YvjPahRWD82WFcEgTA0m3mXLf8BnRUvOi/q1mv9Yb3AtKDg5QLDB\nDIC/dklA9dSVdCoPUAFTd71qnIs3YB4unROhDW95fPFwHlmcKQMI39UWh28V\nI7Vv8jsTIOQqO/yA8Vq5qlPWBPAOPm2t17Ua7E4GMOuK9xyGqcqqr9mbgwoj\nPODZGlK3z3H0n+q/J2LEF5Aut4Vh2uJjkOD16aJU/K/cLXbnN55su+PgV9nU\n8fZ1\r\n=9nzM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","gitHead":"cabbf345518d70d446bf95410872f1a0c947ccd5","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.3.0+x64 (darwin)","description":"React component to provide validation states to form fields","directories":{},"_nodeVersion":"14.3.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.1","@chakra-ui/hooks":"^1.0.0-next.1","@chakra-ui/utils":"^1.0.0-next.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@chakra-ui/system":"^1.0.0-next.1"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-next.1_1592732486500_0.6672321490318378","host":"s3://npm-registry-packages"}},"1.0.0-next.2":{"name":"@chakra-ui/form-control","version":"1.0.0-next.2","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-next.2","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f7d3b78484cc69444123358acbea2526d967560c","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-next.2.tgz","fileCount":16,"integrity":"sha512-Apa28MejjDEx3SxerY3smQWNiPL1vaxPil2gl3U/hftv7VMPgfSxTHShM93oEphSLw+heI5M3TR82w9CPnsfoQ==","signatures":[{"sig":"MEQCIFLsUW14s6ECKbILpz74ZKdRXde0WAD1PIbg7ksLQHPqAiAukKUQ6hoF31mojkwQPBril0G1NPm28WSTVqqsj4l5hA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8M/yCRA9TVsSAnZWagAAmZUP/1jUZVwMvU2A3PrH/mmv\nE/KMr3585C+DqLTUkfLeRVhP94ILGEfRrpxUy6yChg02wb+F+rkYb1YMSmWo\nJqpnR5evG27ax36rIoGRIF4vugCSJktC/USm7jkgUjxvRE063j+lBbkibMFW\nodE9W+TLkAoHx4RHRaeevH1Fl8B0k57UTydy3n6KE4neq+ARsAZm58zdwt9A\nWXoANysWrpSRFjQdjL2XQTgZAKWgC93Ul/D/Qjf3NPlNgW6elaH84SkdX/R4\nhjDHFPI+jDhX10WrzInyebnMFBJkIvuDldeeJNFwHo5G4K7tFyBfqPAb2KP2\nFRc3XTv63zmKOfa6KdjnlVI33hZZLN3K9bGpT7YuqLUiiuBMJnV1u4tXesOO\njIDQo4z8mrZloejKMGbMLZZncu9t9o+tfU/zYuhasRM9UefDXqcMWXVG5jsR\nmDthDjZPhwJ7JbHyTD+g2rKOuj/ghBAapI68Dgw8LdI9maFUh+15nyZCvFXQ\nPD0zVacvpV27vSpIhlBZrlkl+pEiyr4yn1pGVCyxh+t9o6DD35uAeO2vTpZK\nvGLh6jNfL6+98HEauJ8nNy5eAEVPyJOLovWDLspxBS1IDQzubXxNcDCfhjMb\nnGu55O3fPFLGQE4NRAeR7nohgR6PTysQVqio/jNS5qrEMJinDgIxnf9BO4a4\nBx8S\r\n=zo6D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","gitHead":"c5b51e43e9dff400f8bba7da7ffd135f5d33628b","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.3.0+x64 (darwin)","description":"React component to provide validation states to form fields","directories":{},"_nodeVersion":"14.3.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.2","@chakra-ui/hooks":"^1.0.0-next.2","@chakra-ui/utils":"^1.0.0-next.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@chakra-ui/system":"^1.0.0-next.2"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-next.2_1592840171729_0.3878806039233609","host":"s3://npm-registry-packages"}},"1.0.0-next.3":{"name":"@chakra-ui/form-control","version":"1.0.0-next.3","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-next.3","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"187271ada8658710f4f3023d01616c9a64530577","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-next.3.tgz","fileCount":18,"integrity":"sha512-HPSJDRFCaSxXsmZE1DjlgI916Kz15SfxR1XiyrFCttVftUbW4J6EtMLn/7hvYcwMQktvh6vdaGUq4HYzWvNWtQ==","signatures":[{"sig":"MEUCIQDboM5KwyVQSe13AIJvn/FaPqj8IN5wdOBlbjdpSMop3gIgeRUjjRzkiwko41UM9/kXZ2463pPdKUwMkQrxJ8IujHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+MbcCRA9TVsSAnZWagAAVC8QAI6REV5ZvrmjWKiF4Deq\n9o+fwelOVBfCfn64KrBl03UD4XgW9MJNO6MKL9tHSGOrMT2R5g+vayyB0ocR\nTLNPqqC84iZYxKweIC40uylrDh283wBBfAnYA6qFqtL22ycOCpuff1wX8WYK\nZ/IGCmQ0GeH/dOpPRsTuQDMYJ0vXlPVO0SY7JrnJbnHK4r3B0gnsb27nivSc\nob8kVQEc17MiSEFLxXtgP4/sRAV7CRc7HNUMh7oRKWDOA3WdRd2RyMPTD5E5\nPc4f1LLa3CMTjwC4yMFPNpBTCRInBKcJiV4OfqjfIaCwpS09SAecqwNvmYdk\nd3UWkSMS7FP/IAyAfGTgjejggMW4cCTrHORhytfVEGfNH5R3pf1SU8e69QC1\n0jyzinibVPOAVAjSltCYfTVTL90vOGMP78KngehT12rvZ9HD9oGjk5eEG9zo\n8fC0n/D6QOdH8FnMx22eUMQf8/CTA73bzu53zDzDdCcmS+2x4emv4t6nsHct\nTEPwLBiCPltKOfoUxeA2Qss2ZG8SSJSzyGFbh/IwunYKF8ECbiMP5nUizIU5\ncovVR6tkyWJLd+edw0nf/2b82xo1MjVnnDAQg+XA/Gy4q6vvXZfcDrIVTbqI\n6J+Gx/lAc51Mmq4Kt/qqPmjqshTv2NIKPLIbV3nZy2ZwyEAtuKVUFEmLRqHS\n84dn\r\n=Dh5t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","gitHead":"d31ba9c35993985f49da4885dd47ab8dab49cdd1","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.3","@chakra-ui/hooks":"^1.0.0-next.3","@chakra-ui/utils":"^1.0.0-next.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@chakra-ui/system":"^1.0.0-next.3"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-next.3_1593362139885_0.2960092091893374","host":"s3://npm-registry-packages"}},"1.0.0-next.4":{"name":"@chakra-ui/form-control","version":"1.0.0-next.4","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-next.4","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e181bc48ac69023d2d8c826f917141b7b7c4dd54","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-next.4.tgz","fileCount":25,"integrity":"sha512-OHxz6vzOtXTsTU8vGsz+v/+pnF5L60K0gi8XajXmUQUfvSOIFB6Rc7Y0OmII+PHlA7t41YrSARon7k+LC1xVCw==","signatures":[{"sig":"MEYCIQCCmhI4D+ASAzA7AJ8XklRYmNx987HtvDQqo2bFcOXDDwIhANm3EKV4VtZQs0roqoX0OhDoC0ZEnXJ8zO3HlskrQZFO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/MsCCRA9TVsSAnZWagAA9ZYP/2/WYswzInEpUuqWPSr0\ntKM3TlR6yUuv1AZ+Oxp/tpBGCMtYPpkQ/lySh2sqvk1bb69rvchy2++b2gPZ\nz3xAHCVm0qlcY+m4fEcnfjgYhp/pXnl2GNzGnkKVkYmhLZmN5Yf+IJmV3K5R\nAQCr8P06/Mq1AOajANYoYbC52frMJ0LiApnnd5KN4Wr0ndNTozGUFLvm5gbW\n2nR4DVLbogFbVAFaEUqmQC2BTiKlByMMfOAvA05xdXXvE5caML6sCBaH3zvt\nCF253Q7OAEsQh0aVos0bv/V2B4HwNGcfSW/G9PB7/peip6hPzgB298TsFcpT\nW5xyAlfyYx15nkrIgfGroh1SiHukqh2wpIk76O24Al5op9+hvs7kSCx1FOWE\n8ZAhU+zaPR93r77/lUdnluwfnfMdQplj8/EzdImww4PGng1pHtQvuvlh1KP0\nR3ekz9mN7eaAn9QAVzUoKxQ3tkS9Cd35yxJx9XHBpwczplICDlD1SBqKlxE7\n+PRi8kgHPyzTZCC3owPpCQGUb7E5w2NPzTulbCQt7qc/84/vRDfMrkj0lWoD\nvrwaaYeMBhwaXj9EfHe+Adz/ZSbsd2Vmm/vKB1KnANwuci7gD+C77AUnOpIV\nUFZ/qt3bXLXJbHshPjMFQeFIY/iYEgC1tdVcK0HSlTwfDNywiquy/7lQE3/w\njtvF\r\n=jQyI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manange form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context\n- **FormLabel** - the visible form control label\n- **FormHelperText** - the from control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift\n- **FormErrorIcon** - an icon that indicates the error state for colorbind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label\n\n## Changing the requried indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`indicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"cdd5eac1db90ba33a07c009fb8dbcc4453d6ec01","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.4","@chakra-ui/hooks":"^1.0.0-next.4","@chakra-ui/utils":"^1.0.0-next.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"^1.0.0-next.4"},"peerDependencies":{"react":"16.x","@chakra-ui/system":">0.8"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-next.4_1593625345588_0.7963948260546374","host":"s3://npm-registry-packages"}},"1.0.0-next.5":{"name":"@chakra-ui/form-control","version":"1.0.0-next.5","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-next.5","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e3c01be5e5c7d8bc2c50ae3c76a4416ae97dd6ad","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-next.5.tgz","fileCount":25,"integrity":"sha512-8cJY53yrNOIAXVjP/jxKYoQA01LE9PkFYl0mZWpAzlzH6WKmnmqzNHPE5xFAyeahKiLCDPFHifr6cMIiVHu42A==","signatures":[{"sig":"MEUCIQDXHYrbSfjgffwJqdw90oO1KoEb9D3x2B33lJH01xhDHgIgBteREZCAXnxOWz0U/HHncf42UpTvt4oWeuV4Jb6i0/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":195166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDtxICRA9TVsSAnZWagAAPKIP/3g+nk0RkVi72FXMGWpJ\n48aH9X0uPlnZCMNDhqVcr0zwgYQsyfKzBiK3DZhfRK0/y+exqWfRKt48PZT2\nkhTLpsfruCoB1TL1+DPmJAzH4GrMc1m/dg4V9K0s6GzT2a1TCxwpXF46/N7/\nCBdbyzUVaUKOLwh+spJmGDJEi60gpqKvG5sOALNrcMZYGOpNJhWEBnmDPSZA\nbLj93UyHSlIzzkXVUuR2QkKSLaZX74NF/zOSf/bSyWi3qEoAJV5fOJJvWgk5\nw2GiEbAE/1IYP9NiHRWL998gQHj/oBYtOjh89m/3S3hLZicDXXCn508f5Oq0\nKxNXtxdg1izfevw73F9Gsk+HYiqVOYOaDCS/qCqojPts/QLlf/GCMF+AJ6/F\nwNFjoDk7QWaUrov7mKXAd4mTzDUfMJj6Dgmr47a3+hG4mF4K0SUi34KJtAVk\nWbkvQhawXBA7OffCvSdmKHga9/o/XfoMOV0BI+2DKXoSUH0U6TGvHzSmRIxQ\nEqDg9z4Yma1tqupCevD8sMsHxtJM0k9Bto95KhFsGPQbK8XsgwHyouMBQYgP\nH3F61IyRNncaDX4mIpiHDH4f9+37+3XnXaj+S4zuYnBFQFSUZRXrOfQP4AOg\nL5teUpSJzkV6EZ4nmhTFq2/DzNW+cFXLI8l8882/CWCKq3pUtjkbPk41RG0+\nk67E\r\n=SCL3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manange form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context\n- **FormLabel** - the visible form control label\n- **FormHelperText** - the from control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift\n- **FormErrorIcon** - an icon that indicates the error state for colorbind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label\n\n## Changing the requried indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`indicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"24eec5d796d81b6fafbcfa7231fb2cb15e6d5a29","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.5","@chakra-ui/hooks":"^1.0.0-next.5","@chakra-ui/utils":"^1.0.0-next.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"^1.0.0-next.5"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"^1.0.0-next.4"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-next.5_1594809415578_0.3723432327563512","host":"s3://npm-registry-packages"}},"1.0.0-next.6":{"name":"@chakra-ui/form-control","version":"1.0.0-next.6","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-next.6","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3bdae64b60b6d680dff3241b6522840d4a8e16d1","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-next.6.tgz","fileCount":19,"integrity":"sha512-bO+A34GBCl0Q84gFELVz5ShY2xQ+qgKYbyqhbXweczZfkAKevpTGXDtNJqF8C18jTac9bOWOBba2NUX3LcYrBg==","signatures":[{"sig":"MEUCIHQAXNdOg+J2qCqcJ0oEK1bBJCIUzjWoCxGtxRJhmMwaAiEAsUt9+nug1DCswc94JFqrHnEdY4FCrSrVCoxVIT2yKhk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDyI6CRA9TVsSAnZWagAAGLUQAJ58LmE2+Vhdn80CgoJs\niWT1k7fjRyob1pRdLmCHJgvyX7rraqTEC5MQzi4HqbWd61Rp4wjPAJc5QKR3\ng8wmo8067EOebsjF/imFeCGIYtafX+1RqgXsu6rIJVmfgHIeMIgMd+dep/y/\nDWb7BrDEYgiASmqAXslXNOSxQd332XYLurRTsz1Tmv0UKzsvCTPqyNB2ert9\nYXcVXzsQujTPpFinSglez84u+4tjV4yiPQmpyu/MD7JSoxNR4X6SeiRI1ETv\nEtL4bSJbB2u2nWpsZFRpzeH03pPq4cpmAbpqQMZymFGiwT/Ap9ej6GcKVGuy\nzGmCQKq+BtcM3DaVQo6sfyE393qCtLMndU2jDNsaBw9lz5c0qjrrMpBJjDAw\nI1DvB8pFMEEBT9xnYAM5VJyvFAI8c4xqeC/PDiHKX9wagDZCTxoESvwFRtXg\nbozzFD+NxhbfcVDFfuEyT/kwIMTZnwDsBQdTRBwims8Td26imEWUZEyNVd+9\nqr5ibhUpqI/ShyZMGGN/WefKmGAZTc99l5Vc0fQiGYvh1n0Cs08/v8/+57RF\nzAMl4Hp0h2Q4o/FVWyNLkNgi5jW2Mqt8cpgg0jCjY5EyEIcmFyuJ2TVZ+TGD\nfSnOw3TzhQuCDnAEwHKckGOReJKc6Adj8Ajv0opg8B8JVtvwr4W8Ss8Ji1NG\nfVGz\r\n=xvL7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manange form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context\n- **FormLabel** - the visible form control label\n- **FormHelperText** - the from control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift\n- **FormErrorIcon** - an icon that indicates the error state for colorbind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label\n\n## Changing the requried indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`indicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"72eeca4ba3fc6e7d8845b0d283a03cb6ec384a50","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.6","@chakra-ui/hooks":"^1.0.0-next.6","@chakra-ui/utils":"^1.0.0-next.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"^1.0.0-next.6"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"^1.0.0-next.5"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-next.6_1594827322190_0.7265725537648844","host":"s3://npm-registry-packages"}},"1.0.0-next.7":{"name":"@chakra-ui/form-control","version":"1.0.0-next.7","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-next.7","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"970ba4c3d51141f5c0313829dd14a7e374391c7f","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-next.7.tgz","fileCount":19,"integrity":"sha512-fBoH4t1Eo039FZMYncNzB72oWWPwuR7TXyX8iUxSxP/+Hba7C3z0yoW5JZyX2Rp01c3oowrulZ0/ecgdYR2SLA==","signatures":[{"sig":"MEYCIQDrawDYTsYWOT729b9rew05kJ8Stm7l7ycMmhiyfD7xEwIhAIc+swbutFMtnIrBHpX+sF4FW/DIsMzQOHEVJjdZQ0Mg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHX1ICRA9TVsSAnZWagAAuWEP/Rql5WLiHeJIqm0fCTTB\npFPxcWyVX5O7iWIATLrTEUXs+rE2w8ip1+zysK/ayl/KS2uMkZu/GFem9iGJ\nqFG701UaXjihjm6ghb3K/KF6UD89Y5Z0IuKk0zMN8O0sTWG3F1O6e9ByW/95\nrv3rCjlJdilaujVYo46GUe93PEr7EJ/GZhoAlCbuYnRua2las1A9gciJKhrB\n/5n1OPiXh1eiGTsmExHgm8EPLh+1IIt6gx3GtljiXAOok1Ua0+v363QGsCJ0\nMzm7ac5GxWzwah704cXt3tf0IRyvcJTDX9I5rE0fmbMcXeZdavRpJ7A34iNW\nkttWU93pb4WEuxhuX66qqAtiHxiRDHuTipj3YAKsoDkxqL3Nr92GBcSCr2KG\n8xPJh11OoL7Dl4k2EoZGP5e8M1e3uYhRGYHlWOe8COA8eou2T7nkEPG6iWIg\ngTQaSz6yT425m2axqGBpfQl11O97U2EBctme8hqNt/wv3xV7PVJLlN2mF52k\nAyt3ANqt1mDXqqDXEnZ/ciuwLZkZ7BS6RyqwQcpU8v9dxMbhKqCGMXpB83IC\nXahq+tcvJIdRH3c7HsUDNPmfgfLq0H5/yS+cLBqkfcpUbBebjsWg7CzaLEEe\ncKhaL865kXxrowtkG6YrA7DOj+HW3Z2TTdi5lNFzP5a/kwIu18P3w2O7FboA\nYw3z\r\n=JwQV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manange form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context\n- **FormLabel** - the visible form control label\n- **FormHelperText** - the from control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift\n- **FormErrorIcon** - an icon that indicates the error state for colorbind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label\n\n## Changing the requried indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`indicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"3dcabd8c7e21b32ae1b61485588f70370c4e626f","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.7","@chakra-ui/hooks":"^1.0.0-next.7","@chakra-ui/utils":"^1.0.0-next.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"^1.0.0-next.7"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"^1.0.0-next.7"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-next.7_1595768136266_0.17124634831662489","host":"s3://npm-registry-packages"}},"1.0.0-rc.0":{"name":"@chakra-ui/form-control","version":"1.0.0-rc.0","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-rc.0","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a07a082ad32e0de1cdbec56bc7fc7a001dd15d59","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-rc.0.tgz","fileCount":19,"integrity":"sha512-oX0DBG+sCWKDFVija2oFiFF6exZTSBw5ZMLhyF0Rw/S9x/cCF0YxkEnGQw6TQAMYJ7MYGNI3EoQ2frx21E8smQ==","signatures":[{"sig":"MEQCIDQ0OYFd7Dnso7XZeiG5gX65ksFJlUZ+nM0ERmnSl8x0AiBn6U90KOAfvAF9DAOh4Tx8ZOFXX9s4v54Vt1eOJZ1GfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHagDCRA9TVsSAnZWagAA320P/j0y+Bgn2o3hdHlUOi4W\nd15L8kuYZk4ofJQIOxejyhf3lkFcBVk55QM4EYAABpPad7FtvEo1KEDOzW7X\nzfguYw+DJi4627S9PPrOVSxJHEgXWDNnrj1Ge4jDV9lmnRkulgxPdYM3TxW3\nCx6SqqlUCsUknHI+52EStR581K2SBK3IxXm/OH0bwXvohwEUoGo4AyWT8kdr\naQS6uEqib9gR6u8XGf86GdjYGG+5GHe4//lRM67m6MY8Qf1fivkSHCG4XBUY\n50Gqr7vz4k6R39Zq2mhBoVzPq1ozQ/hN+CxkaHPTyiyskR0z3xx64UwpAqzD\nFhCojWplaLoRDFkdqDq8O7M9N5bQ+oIBzKWLV9VyGzPQRzQN81uQU/F+pYoJ\n/s8Zn7LVOZsfNzIf7JejtT3bGGkJKgrHrn8v7InO+3t0e4jqyqOv1j00vdm8\n6fUit85IeQDVJGnPYmrc7wm60lDxXy/t1ptCb3rsX3YBUwpHF0IgqOm6oh51\nRIbs/HPg+4XLgWU2tTawAzK+1XnpQueSQjFDo3rptKQ10i3MFkhpbucBUCco\nVxcCKpaKxWUpQYAJPIp1ljtdYbtD4T8s8gn4h0jh+PtjpaalvZD33Xe4JecA\n6yk/ipNwZyU2r7PytsmGPXsAMgCc7bdmMeSsFnMfdpcdloIRaF3Tcf6Nrup5\nbcfP\r\n=BWCo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manange form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context\n- **FormLabel** - the visible form control label\n- **FormHelperText** - the from control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift\n- **FormErrorIcon** - an icon that indicates the error state for colorbind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label\n\n## Changing the requried indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`indicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"60392008d42867da38211687e2491f02da9975a9","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@chakra-ui/icon":"1.0.0-rc.0","@chakra-ui/hooks":"1.0.0-rc.0","@chakra-ui/utils":"1.0.0-rc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.0"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.0.0-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-rc.0_1595779074839_0.8044990288535536","host":"s3://npm-registry-packages"}},"1.0.0-rc.1":{"name":"@chakra-ui/form-control","version":"1.0.0-rc.1","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-rc.1","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ab5d161c93a2d092314804a11316a8b67506fe0b","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-rc.1.tgz","fileCount":19,"integrity":"sha512-WUeoU/pIfcxm/rmHsyHM2Ih0s3BiMzwINlDtByU3JFiM5MZ/KCGDTJOOSWoHNZK2BP03vtL0HP4RF7KQjjd+Ag==","signatures":[{"sig":"MEQCICdO8mmFQ5SkGMASuIK2/vQWJn/pxsXfU2G3qnFj7LH/AiBz5QpwN1XZ/cZrxXVEF9dW5Yt5C8kHN2GUKUu+ERWjfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHLJCRA9TVsSAnZWagAAOQAP/2cRObVIpfD9e9bNwHtd\nkHXNAbXgvhUfP9ebFwWxlE+f3+kZTmRr8C8uSuMv0AVIMcuB4kMDVfAfnW1v\n4JqS4n4NTySwYTQ3vv1zErve+xiVmCL9mordXx2Hpi10I0inXxIqkHIiOcEf\nwJpRm3YBcDElHRZf6DqRSCvIzEBVUPHk1smqHDdOsXIxPhfezG2FOqBGImHR\nxAm7R2a18i2WNYhDbn/t51mdg1Q+28ffyjbYO7I1y6t7KVerbJblMnUNyKy9\nNXGDK/H9/Ge2nHruFW8DSjPszZNQrLpH37AxEMPaC33w7cAr25CmLnVfE24n\nxHqKHy6R6Utlhd7ihAfaeyxUB1+Nfs5uqcHNfGmlY+CGl8aa89+wg07k93ZN\n3JygiIntpjIocN5fGWGHkMcm0Hye9n0VF/v9u7UyQoZ3azIJJ1PWD3RtrdPP\nLfUn/f5CA+nZitj3vvRRy9uScvDC9R35GtPCTPSDEQMXv4Vr8JvJTCs4kRzK\nRYO8TjaN/f16Sv5LLMog9c8PCRMAnp/mdA+E1SMj1vO4d17p37UwQOkGV1/D\noNeSJhfLSnC6+loHAQA1LnF5AOVnZdiXYk6JUm/ZEQ3PQiZW4r5WuCr2S6wE\nxrbm3/IEsBiym2wsUprULNFPfdfw8vBJ9zA5H1RC4kLqJbD/okI0ngq0MZSW\n+p7e\r\n=wigk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manange form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context\n- **FormLabel** - the visible form control label\n- **FormHelperText** - the from control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift\n- **FormErrorIcon** - an icon that indicates the error state for colorbind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label\n\n## Changing the requried indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`indicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e0470c73a9f6be24525dc5458d6fb157096b5ae3","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"with-heart","email":"mark@chanchan.io"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.11.1+x64 (darwin)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.11.1","dependencies":{"@chakra-ui/icon":"1.0.0-rc.1","@chakra-ui/hooks":"1.0.0-rc.1","@chakra-ui/utils":"1.0.0-rc.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.1"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.0.0-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-rc.1_1596748489321_0.8580925338521963","host":"s3://npm-registry-packages"}},"1.0.0-rc.2":{"name":"@chakra-ui/form-control","version":"1.0.0-rc.2","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-rc.2","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"393121c5ba58a7bec5fc2d6a220ace341892c3bd","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-rc.2.tgz","fileCount":19,"integrity":"sha512-qyBVGUUQn6aScbKMokl3wPsvjbFugonLUWa0kk7UZGbmlvHLS2yJfGI0x+ZohPg9FolXtUKct2V9fxIVaAalmw==","signatures":[{"sig":"MEUCIQCu921I/CxgFK0oxgcqcOBfDEHYg8RlXCxMg/j1CMcVzQIgIjFSixzV3Nu2OtJosooEKaq560HqB0N2mU1yOcRGR9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfL97FCRA9TVsSAnZWagAAkEsP/0pzXvJSVYDGYV3K+eWq\nVSQmJU7Q9FWLnd3cfBza/MfjqvbBshWjfg6zXZiPtzw6eX5y0//SZYPDVgk0\n8wGp/f5mtTC1YzyT9HdC2rQ2mwv/Bz6ydnGJQSU0fjLBOh2BRaqbq64crKjH\nsc6aEUDC9nGf4HQwHGLNxxEZmbX3jzMFhMdzIIpk1ERk6fewgp0s8u5y3WfR\ntPHcKCS5W7IRbmMp1d2s5jetW/OiT5+IRSPM0UCMMqYbVdpey/NXbyt9BwU5\nFTB8IldoqtMB18Zk6TVKcRrS8stuXBSykNDmk/99Q0rWQLRdJe05ok6Bkrgb\n9zJW63y2J/SKn4KVyCu9SQ+Z2j0KFYbKerLUjS+Vika8qur/kDERHF942FHL\nc9NrDxGEyAlIN1mRQ2NeLfYo2wkcoqJPhYTb61pYqsmM8ft3ai9rxv57UzD0\nm8fmi/lqOWip4CA5t/ZH6kkZVCfbQF3tyeTR7jBi/VdL++oVcwuharNn24/U\nPvvQF+zKiGABsYUdOAGbrtdYnfbu/FCq9/1D84yu8+PLe7oRD7KEp8x67o2t\ncA7ZosuYTgq2lg29EEAxL7HC8nuugkv2dVUw2CupVVPhoTAvr6ZCM+N1+YJA\n1rLP6Z2P70lsxcJifjUwpzTkGzv3s6CKiSFxFgsqCJtdfQcO4qV+N63nezHw\nezgR\r\n=RqDB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manange form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context\n- **FormLabel** - the visible form control label\n- **FormHelperText** - the from control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift\n- **FormErrorIcon** - an icon that indicates the error state for colorbind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label\n\n## Changing the requried indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`indicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"c0a55ae7279887996fd2cbfb410476c86793e1bc","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"@chakra-ui/icon":"1.0.0-rc.2","@chakra-ui/hooks":"1.0.0-rc.2","@chakra-ui/utils":"1.0.0-rc.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.2"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.0.0-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-rc.2_1596972741470_0.4267451598323566","host":"s3://npm-registry-packages"}},"1.0.0-rc.3":{"name":"@chakra-ui/form-control","version":"1.0.0-rc.3","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-rc.3","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b81d41cbd0b0a169e992990d8955c651224c2952","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-rc.3.tgz","fileCount":19,"integrity":"sha512-8iRAEwrvG+k+3hUJC8GXrZZgVwba3aNgz5HQn2saVL5P8U9nc18BkPZNyjirKZpX5YloJgh+BZW6aQc5/t8n5g==","signatures":[{"sig":"MEUCIQDy3noe9GWgzGlrexl2cI2wNuR3+BRU2nipiC/41DK6LgIgUdCeexT7d1CFKHvVdHNYexHljOVDQAuD5bVA0i6qCMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfS8YLCRA9TVsSAnZWagAA69AP+gLPteGEi1BirDN1111/\nkYKe6rP4XuaB7RJYvBjXIse/Ct4MzBaglEsO8E2nMfBhK5eZqtkTvsorhsOs\ncLSypJJhL0fOrPZMFAFfGIV8tCdGGvLz/nPlyu51k9+9olYIyWf8XIV8Yoyn\n3+jgtyxBbA7P7EcyxBHdo2PPupyWpNRfyUS6PZ/17UsKUxQH1H0yks5UfyC8\n79evjf6c/KrkADVQAgNCP6czdhnFH43eRNkvwCdcyHfWuwI7oNl2vo8KnO/8\n0gMkHBz+m94mNhaQjO062MBtvTv5Q0DuSvlBH9o9p7gg46Uq1/5V0DZGCBR8\nvLc0w9Tb2PUGAoOASmKaPGuN3fd3Z6ghSlf+0g3HnFh9Xscy1dSPqjhEiBUs\nioYyvzGdJ4MA0mSBcjlgb4FaMZKA3sd5LgQo7BlJaY5RRFCehxayrlldMF1k\nzNYoL/H59R2c5iiLsaM/0/wdvRNmyLZiMTNaUQUEOVlxwVHyZe19LiHDwT2N\nUN1H4PDc46Xx8aojc9un4skJdVI8cay8MbjzRdlsrGSTPiV+BaKelDadcpEv\nDeBMJvy12VXqML1aqbEh5YuX1sa+HXKyRHgDK38SofrT1fD0hRBsoyPH1LJB\npZaWUYfUg5XnPMOZroM3nrC3d1V5h5UlGTVDd7TT3MDbTOSbLrsNb1ETm2cR\nxXBs\r\n=tEly\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manange form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context\n- **FormLabel** - the visible form control label\n- **FormHelperText** - the from control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift\n- **FormErrorIcon** - an icon that indicates the error state for colorbind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label\n\n## Changing the requried indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`indicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"a0b689f3a2b1589d58e4d9b0c8a9bbd02ed90f6e","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"with-heart","email":"mark@chanchan.io"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.11.1+x64 (darwin)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.11.1","dependencies":{"@chakra-ui/icon":"1.0.0-rc.3","@chakra-ui/hooks":"1.0.0-rc.3","@chakra-ui/utils":"1.0.0-rc.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.3"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.0.0-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-rc.3_1598801419376_0.6531246813806753","host":"s3://npm-registry-packages"}},"1.0.0-rc.4":{"name":"@chakra-ui/form-control","version":"1.0.0-rc.4","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-rc.4","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"eeb0f3a2aa4e90cf3c27a437ddb62dea6189f14c","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-rc.4.tgz","fileCount":19,"integrity":"sha512-ptQ3xqCT56WTLVakNW3vr88J/pSpiEyNTKi8C8B6tz8X4WUhKPAIucbXfekBFLaG5mYKlVoY6THd3EiTQxI/AA==","signatures":[{"sig":"MEYCIQCqUOy6K156v4zYR4COjLFjmcJiJTs57Qg916P2DDtX8QIhAKe9qrlL7opwRPnOjfbyr/oQWi/r0tVAIcYHAD1taksT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":138162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbfnvCRA9TVsSAnZWagAA7lMQAJ/ZNC/rUajc7T/U7AkO\nwcozjGaomadh6UIKWDOo2YIaBepMvuS8MheJVe1zBoevuiiLTk9mtexX0lHR\nRXrXshwDi8a28p90yjMIQniFOCnaLBjS6H7hvNlAdb/bOg27ffztDah0wPMK\nx7F7kohdcKKSsmshgJO2d5rDUspHSMhz5/gx/pXBw9QecmQk+iAx8J2qFu+j\n+JNvdM5LSFCfHiDUlWR9F0MBAZvaNiV4h2Vbo4SfGrs+BoREnlEFsm2zDbUZ\nyfdKQrfS6H+8mWOMpOTP39IwGu5MEw9t7IwlbLtsv+tIkJ+/G96R4Fg8aVza\nrMK0CP1MAs2Hf9EWyhZadEMoJeDqxAsUy0Ez/fKTLHSMMzFXvGEWzt/4/nRy\nKhdoT/CTdVgHecVWCWwgcpw3R2ONDMM8WPAeP2JP7wTa+K3pbyK5sXgm6gjO\nqMNRPFbuQ1vykFgPaRUDHIIOq9u2rEYJ6l+nzfcROiuEz7ZLzXw/uDlZ+vMG\nBcUJm2PsEJ6M+9hmUDE4Czg+6UX25Yf/bjE/hG4WknFRF64wR0C+r2XLnTdz\n1RrolXeQojTJmDiAI1ur+evy++0mS/4ABfAX0WaVvXEjQRoWgCGmGOUVlbZ+\nceOUXAYiyLTQueY+bPfkwAFn1+1Aj0qL6MIRa1zVzTMeV9qzRXoGE1dm79QW\nF+13\r\n=C9D+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`indicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"830b8587c572a4c20d6b56b256accd6686255819","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.18.4+x64 (linux)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"@chakra-ui/icon":"1.0.0-rc.4","@chakra-ui/hooks":"1.0.0-rc.4","@chakra-ui/utils":"1.0.0-rc.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.4"},"peerDependencies":{"react":"16.x","@chakra-ui/system":">=1.0.0-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-rc.4_1601042927488_0.455550105430758","host":"s3://npm-registry-packages"}},"1.0.0-rc.5":{"name":"@chakra-ui/form-control","version":"1.0.0-rc.5","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-rc.5","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"615da70a2708b562d442f93b80ee63bd1b9db5dd","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-rc.5.tgz","fileCount":19,"integrity":"sha512-aJhwDvYBwUK2NmU7nmXZODoHHI3ssoufZTyR0T2RMegFDXwA3X/Ywd9jGhAfq0yYzO7eFopIAkbxjwUJnBjW5w==","signatures":[{"sig":"MEYCIQCRWmyrSac9t52DtjyUN4Z1tijwab52nYcqwqVj0khKPgIhALe4VX+g/xhjUYBQEyLvDnLBZ3Tj+KSD4U9zkw1VdiY4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":138258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcPW5CRA9TVsSAnZWagAAPYgP/1C5ibE5QIehrA/7Ds8r\nIB0c6zupariT5+aJ+B/tgVa5WIPMe2GExMn+xcLBGtOUih452pmgrNmlblyf\nUhHcRJ3muzCMXkWbq8yQaat4+4Skwz67w54/wV4p873f0lU/2AGzSS0BmRX2\ngSyUPKsetWiZA1Iu3rdrzZWmK9zwO8oeMkebE6AbKtIfr0VP0R+qzFst6Spb\nkV7ys8zsOxp2UZUdZoMJokVmIILs7dJOiS4h9YQCDI6i8TRz/dX1WecNsypn\n6eH3oYoRjDum4FSTsxD72WyhNTPdnsf2uO81unlOBzJyXxwnnqRgl+GLwVK8\nWYvg3u9upqx1Opro21WH10Zkc8GVqaermsLj34JLx88rtxzRZLaUBS306WhM\nscObojeV/uQSn24Syr1zZ/47DH/8ZWVEnXNiPRD0vizvIJXvIOgrLZGlDM3Q\nPGpUilrL5CzHPRF5P4TgTrJyrkSwycG+qnAhJL90HHIt2luwFHLPbIT7/aIS\nJQO4oXn9Yk+NRTIaqJMHuoWPRNx92gljEqlmCnjaaG0nVCqMC5sFniKXZZtn\nhVRfTwHWLKmX896dEIsbpoJ0zIOUpISdNv/5JeVy40WmtTDGTTmU0KBo4aQ0\niii/fQmuQU7AsySTLzq73BZ4CgM8dt1+llHfvHJLia1LVxUDb9eafr7YSH9G\n+Z87\r\n=0X+y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`indicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b5c8482b778b19f27ea1d6c8ab6d5ed39c664afa","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.18.4+x64 (linux)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"@chakra-ui/icon":"1.0.0-rc.5","@chakra-ui/hooks":"1.0.0-rc.5","@chakra-ui/utils":"1.0.0-rc.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.5"},"peerDependencies":{"react":"16.x","@chakra-ui/system":">=1.0.0-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-rc.5_1601238457575_0.23496086870411337","host":"s3://npm-registry-packages"}},"1.0.0-rc.6":{"name":"@chakra-ui/form-control","version":"1.0.0-rc.6","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-rc.6","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"33f01aa4b52f37949b2fde59f8e359c5b46b73ea","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-rc.6.tgz","fileCount":29,"integrity":"sha512-P6hK9uJByD7AnspWo7wn1mKJEfT+0aZexi+vmTPqnoqn02i7FLjP3AQUM0xVuo4jQExUJiNEE7NAdvYnPArpsA==","signatures":[{"sig":"MEUCIDStZqhOpQ5k6pWYP0hmhAaupckxiLpbU19b9TxoG6OKAiEA3gdovExDv88uQiURSzN6AkivK8h2nfgYhM3JZpbB6e4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflZ0ECRA9TVsSAnZWagAA6IEP/jwIUfYbAoYjU+Y0KI2W\nZw9VESWGZJ+92W7ATZgzFxfkLgLjePADeRyF9HgTtVEv1WGZE4RC91+PmPE/\nJ+3GXZgN/+wQnSrPqT1XV00zwsimlx1taKAWXaJ0KEaJFa3JPNT4bS86oc9O\nc0qKGR+BwM/y0GYk/UaoARNZtnN0TlvsYOW9NWNH8j/ExLKU1GVAWA327GxG\nOFEYEVBoz6i2capkSxc3hkB/8RMgKBTGAynf9sq8dAr9U88i+KBZW6ILG37M\nl4ycu0dLiUcsP1i9DyHrM3/7oJ41kEdd9C9dObZcYIe59MJ6/oks/YP+fBKl\ngnxlk/apjM5rMLYSAX8CutukBwwVtZO3n5kYvxF1Rul/y8o7XV+UTq5D8Hbx\nQeaCxFJMEYkpLQArJ2rE1uXTcQZKSmHZMsnX24n4g8Ewn0Mug0woyfUol/oi\nvGxQ4un4lZQcPQzfs1bkHuJQv723yE6UKi2rbes5enC7pR7wnXwmPAAtYwUp\npUeSDNXEZja5/en6aM19PvPD+FDhZrItM1N8KPxiAK3PA/+fgFa7Bajb9epE\nmpFWeIZQ5qifMs0C+qZsc+lJGD6AujSPwhpseZLL+zfzkjP6bZPANABq9MHf\n2eGtuzSPij3bSQNaQfO6L/+lq74SvNQRLH98MswHYcTeh3Mgyp71AEORIWhE\nat5J\r\n=clgm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`indicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"e55b45840d1edc821ad0bb45632535333be5bb86","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@chakra-ui/icon":"1.0.0-rc.6","@chakra-ui/hooks":"1.0.0-rc.6","@chakra-ui/utils":"1.0.0-rc.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.6"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-rc.6_1603640579932_0.8823846142576874","host":"s3://npm-registry-packages"}},"1.0.0-rc.7":{"name":"@chakra-ui/form-control","version":"1.0.0-rc.7","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-rc.7","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"baa8aa64cbd82e1348c3af59ce83de3b5bc5857f","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-rc.7.tgz","fileCount":29,"integrity":"sha512-bPjXo6tHSKAiRHFF0u6HYL2SSzPKsK3mZjZwmdhA8eCpwiMnyF4FvjaMQuicOpA/yejfBXSkN7rBoB4bVxmexg==","signatures":[{"sig":"MEUCIAg4jzvfvJxn0whRC2BOAoxBHJSvbKLil1TZHwAWEr+lAiEAhPTAKqE8qNFYmRg2gKe+VdyEN1BKNfrN9u+Xyh3xj0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":96069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflfBrCRA9TVsSAnZWagAA3Q4P/2JHJWXxZ+GK0jX31iIW\nxiEvbsNHRwpoEiotTODrcJ2+kSq9x5WVPLgyQfOhRQhq4gI3n7qsZ1T9eTMG\n6SifYCRkrFjCPh1eE7iHPDxUtZR/SdaknkOiKiTLk1dU1MmoJ4afFtN/6Nj/\nehr10Izz94sjlrSUf+gYb1xwCpyRrBgJgKA9eWRpgEzS4sJJl17cHT7hDgG6\nDD/e7mB64Jf0SSi5ai66c4AIv2X4zSxcNanK7pBzQhaXcw3/7mJzEpFayEF5\na65fAeGKanHLA7tXA2NLs2cXUHPnjVKnLFwKVb2+F9WmjJJXBoBjlj1VHS1g\nZkOCoeQRNm7YSMUtalmTtKI9S9qUMfnJohHxg+Wsrc5TErgVcqH1PquIN15U\nCt77cpiFiFJouOfVxyPGx+V8FIpFb7u0f2j0e5muEQJIyCCIkj35SXJq5Pkb\nUnKYciGnpERsCX7+JJGxejPFsCMWdWt2bcRmIVceSD61eZFt6DQoDifMkqLc\n+9SXlV7HoVZXfgszW0ShCd04N7SCzcXKFaHMIMInhn9XMCZ9vZv0EYJ0aYVi\n6vvkuhnTpafsGjFUijrK6Mk0i7R062qeIfl6XqYsYs3qDzoEr4KaMJ5hxf1c\nQM3OTSpXyxcLiPP62iEO8keIUnmgjJxf/xsfUxhuvO9cVfHeYwuHWjwvIEkP\n/7tP\r\n=alyV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`indicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"6da531af61ae3780c764590cbee62297fb206e46","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@chakra-ui/icon":"1.0.0-rc.7","@chakra-ui/hooks":"1.0.0-rc.7","@chakra-ui/utils":"1.0.0-rc.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.7"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-rc.7_1603661930852_0.351745254788576","host":"s3://npm-registry-packages"}},"1.0.0-rc.8":{"name":"@chakra-ui/form-control","version":"1.0.0-rc.8","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0-rc.8","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ea23b1867a80282b110fab8c5c8523d00422e91f","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0-rc.8.tgz","fileCount":29,"integrity":"sha512-aoQWl7QMg+RJ51s/NkuxldCPGVtN5gaQLASAXXaUbrwyLCPFyEpgk541096laRB+h5uKytIzRcEvVv7Ox5Gtdw==","signatures":[{"sig":"MEUCIH2QfvSDpQCrHY0yanbfOzMQQZ0gEU6xMgf/IdsY2hYgAiEA3IeeJViKzDpX+cdaC1pKqh9YuRQMtorjSKUjWAGJQQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":96475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmyUDCRA9TVsSAnZWagAAp7IP/0OgmPjsm9M/hypVBmJ1\n6VntLwcIqJXs4+aTIohgb5BgY5bmqgxbd8kbLidjtsRosBJh1l4x9SIUyiTn\nkVRfGOQzHRXx1boLOoS3kSV/FuZg3gZwfHhQSdrlpFDEoQcoh9tCEEcsYZiE\nOMpOvlz05cJgfgdMu3XyhKTIuMBIxt9dSMH0g/JzHU+ioiKuV5G32rfl5WcL\nlUgG+0HKmkmQ+uzxQ13C/UJccezW9idpoe83MeHSz7mRFidAEmjevfH5/uzA\nuYv9ugDKNPOfdDouhjbi1dCHD5aiTVeSH/EaAp1c9ufN6BfWs/DbeymyDYQq\nXtr4p6fHi+ox2s+V8eoi83LTOKZIY0RFXqiFJvxzns1P4Zh2C49ObkurHeY9\n7/QH5WYSdNwAXN3+2pEz4SdEJL7ZO9GzK9SkoWoh7YbJjv92bUoXLyDJ3eA3\nxlIFBlj9zq3guFA6sdNRoub/TXD/TcZdFXqVouK+0vdhN0ekVnFPWCKOY2iX\nVv8QAFwNu8Y5d05T+qp9MqPN1MlOW6FwErOdtrmBUujbZwtno2WrMxkN8GRz\nt5M96AP79h6CXPisOd//cdeBxNk+CHvzq/bXCzKKYU8jhoj0lBagi6VMGLPF\ngJMJqeobbpQ6XGUEdWUUWMG8sCPy0TqYNVGZIq2SAJuAJmm3DGxGxEK9tNgb\nb3iJ\r\n=CsJS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`indicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"de4cffb1638e8d10cd74515b0289d70eb94931be","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@chakra-ui/icon":"1.0.0-rc.8","@chakra-ui/hooks":"1.0.0-rc.8","@chakra-ui/utils":"1.0.0-rc.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.8"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0-rc.8_1604003074695_0.7579537597639996","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@chakra-ui/form-control","version":"1.0.0","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.0","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"46cce473744c3dc4aac2a0bcc936c043b42bec83","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.0.tgz","fileCount":29,"integrity":"sha512-2Db5gUShYNWdRfYaSEqTMHgw7awDWaB5Wy8umQVn+XvnIP8cXumj8tzd+CusqRJ9W9wW66gxrBSBUz2s7xP7BA==","signatures":[{"sig":"MEQCIBISq9yHkqHTHtTD9LH+IsgHAAmO9cvXut4s2fGiJpLUAiBG3iHFnN6aRF/Pnv1ssHcTAlbf1IeY5CdcSHRvx5KAHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrl4ECRA9TVsSAnZWagAAyAQP/3UODWy3M0LwvJFzJxS5\nZWEKnvEQ9jXDUrkqkj1r+Uu4HCBmfonomwutRYSmwJc7LmUSskWGlwQ6H4j7\nPdXSB9CwKT0c35GIjF8CZmRDNLO08ZDbm+YAB2UKW8P2ijAhnx9bOQIkGqHz\nuyNbmkQauIHTSdZKA2wlBWDaiCPlHYt4YxlnQyJWcSxHyNpFuyV2phSROxWF\nGcTWii5yg5eAR/zB5UC+i92yS+tEAtde3hqXSWhSJjB5RiluonyH4jpdPzMj\nVRq/WPmpe9u7uXXjKcQH46nFox/dyg3B3jSUJPVTwLU+P3iVbJQM0UpPvnmD\niTObxQd60tv+2vrMKkOmQujGEECylZG/pOesFFK4TyetmQVKuomTqf6rh8Gg\nAeQzO3QxUTsfs16h9JMkNctB93BmwptBh9XO42HWt5DtGDi+l6SicE1AjzvB\nYsB2YcGMiWgBWfoRyJGpPkaJPOotrSsRK0MtBwU5HV9/9zZPY1xhAddN24VC\ntIJ6Ok4gPYC7S1LVyIVAm8Ncg4UHMBEAtKjs8avIryt+yygaU8PsIHMmhpbt\n+d5jgsdyi8zqhE1z+LZhz+3GIHVRpiUXOilmQCm3wnT5WDRlHGZlw01yONSo\novh32r88J2dc8ogwrjfCKMxgLZmUmIa4bV+iPwCbpVAwB6zCR8vgWIwxrqXM\nCuG3\r\n=ccQa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"c98ca366cec7151fe7ea4e0b6f893088797c5398","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@chakra-ui/icon":"1.0.0","@chakra-ui/hooks":"1.0.0","@chakra-ui/utils":"1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@chakra-ui/system":"1.0.0"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.0_1605262852455_0.29119481865665864","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@chakra-ui/form-control","version":"1.0.1","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.1","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3248a44325b0f01b8835a807596d1d6496be3dfb","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.1.tgz","fileCount":28,"integrity":"sha512-IbJLnmzKVchUu9kQ2Er7X2IFWfqZlEPimbs/qyofar7jjuQysQBXvU8Gd9MUYhXb6XcOOWt2CdPPQZG1/Kohvw==","signatures":[{"sig":"MEYCIQC5CA+punaRMH/Dy1/uu6BEMa0mrNqQXO78G0RQIHMGrwIhAJbd4dEFxWxEOSf7zJq+FkQQHaKoVSgiN63lkRg8gXDT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuB31CRA9TVsSAnZWagAA2tMP/0zFJxRGTF7UwYPccRNf\n16keUR+rKFTyC6kvLgS/R4q0t79A/1120w3YVr1nB6G1a5eUmCJmOIq18dAn\n0tS/opc3/qneIhmdPp6FjGDkxAK4dBVQAorFSzkmxX+DC/ipA+v3hlEUjc9Z\ncBYkbxJrI4yh1OczRyUxStO+eWxDvDYj4/z8yy2dJvSsxUDMUohDTfRpeJQp\niokvs5/iE/0wJ8btdxgUOctHXu1SqwTjUEJLlWXRHPpjsUMImrcuh3f0baSn\nhhaIobS2M/FU5m5tBN9MTPq4m/NEDAODAKLdp1G1eEJzoY4x4Fgf4Ywx8usP\nEIGmOqSeSGAjHTyIVsh/GLr+tZpOtc4E++bBGEcfO6nRprvCY2O/8XRpDLqJ\nWSzjvyk/VDwo19B3iThos0uDXjewJzugh6hJT8va1KLI+kP2Nk3btRc6MPAf\nD/GhihBc8myRy0VwvCgMdJP/cKM7wFz9X8rXXOBrw/5IiQu6jW+tUfa+ywkv\nIDn7/ekQEkBH+aCaXdGyignNaTo47O0ABOpXnPn+qO/9EksY+ZoQ8ehrEh0o\nL/NAjoq4hg5DFZGH8oRip35BcivtspfFe8NOvy9hs5mTM7rBrSpQ+3+X5Vwc\nHvK0HoF0ApYfN7Kdt0Yro8ZrgSKbnuASBCW8Fiu4E7p/4Z9OZjBLZmccZqkw\nCHCM\r\n=Id0r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@chakra-ui/icon":"1.0.1","@chakra-ui/hooks":"1.0.1","@chakra-ui/utils":"1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.0.1"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.1_1605901805912_0.349766451982251","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@chakra-ui/form-control","version":"1.0.2","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.0.2","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"821879bd1d2bc09e2e39b18c1ea862506697e869","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.0.2.tgz","fileCount":28,"integrity":"sha512-PEfhWbtfw1lLbMsVeCO0urZYlo198d+6Py7nA3WLppqR7nma8t1rYUSAtDVF6cMnNdIV7SeDNhm3Rk1mEDJNlg==","signatures":[{"sig":"MEYCIQDnSisqBglz56AaH1vPFsPfaJJIhYAbWB73lwUdB/i97QIhAMbe6IvLxR2JefoL/elXac7Ax7WTvjKuQijWZ86AoPKv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfySvSCRA9TVsSAnZWagAAh44P/ixDhDLp5skbIsuI5d43\nGLNUohga4HIU/1nJvqru2afJMK1jigEV1I6LvpA1A36bUNLIjlko2oK/opIw\n3XfE1vizS6CVCV4E8Rd0aZMQy5mQg7dOviE0BXRnIPK47bOPioh75W/yszB9\nc8xjvB+XuqATqq0bVmcxNJREXT/w2fwcIUibL41Oz+AzsRislY8LZE4Ih/yx\nglTT8L2AyGyoJe9ExyiR4rb6xSBA+SQTODvJbgpJqX4z1ZS9poljXHCbVf7A\nrkEJtpzGurMyEh1MQ6fH+bTXG5sDKgnFYk0A/nxCSiyJ42tREcwKcN1kQnQ8\nvnVor34TbardVW5E8MvRxHd1fOsbmPmXE0OgNwq84PJ9vlI0z4hR0cM++g9e\nrr3lpo6r9VN1sILMBX5CEQvIFvLkJHx/M7hoUjsvChF1eC7vIMfClFqHoKsI\nlwWzQhs9x//fapKunUm3SdcIvM4SkEHcUPJCeWl4f2I9/pzPM+OQozfwrFDK\nEAIiQ72nB4NDQEkiGXsrmAoMnvnPR5/v6ivrFtuxLfUmiddECMM4X+EjgN6G\niova1GDioqifvF4k6EKG5e0t7QSa/ZO9AvDmc5NMxv4JhBpP39O9QY99+k3v\nnEaYPPOvylJhboWTc5qR/NCEhyVMvnm2XJ7KjbLTrvxKasHGo6gj2mVOh9G+\nRbG6\r\n=ThXO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/icon":"1.0.1","@chakra-ui/hooks":"1.0.1","@chakra-ui/utils":"1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.0.1"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.0.2_1607019473544_0.1727638724444247","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@chakra-ui/form-control","version":"1.1.0","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.1.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"728e530976e8fea72a761c697c6d3ea2f7b8400a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.1.0.tgz","fileCount":28,"integrity":"sha512-kpfpgf9JWwSyQ89o0hIZmQHTsoimLNBZb9I9XQNiXTxEB/eYViVYcIsmSPD8xeyUq7S+wbZV0tLuxAboTNTSrA==","signatures":[{"sig":"MEQCIDlOVE+jFW4LHjj+hVsw64bSJvcSXxyXTePVgbA8KUndAiB0R+H8GJr8+31TlJrTMu0v+PLIBoRiTgdYHGGwTskzfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf29AMCRA9TVsSAnZWagAA14kP/RRpo7+kLkRJVApO/NCS\nsTyKNDM0IQm8FTpujHbwC7ik/UiGlGYAXSBVhXGiwg48l/m5LgeFrq6F8H3L\nCSsii9JiCBawCYUAljAS2kPxBrZTsr4DzNX8fTXNTtBeA5tn5Bf1+TZdzzq5\ni9WrwEVdccqTjLjGFum0L6vm3mC9g53KgEsxREvBTtztL0TDNkSvYYVHcOVi\nadoUjal+CIBMepOZxcDzQb9m2ITuahBQVpuE01Z87rO7J7hk3tQ5aQSPGiCB\nKvjGgx1RAmS5zmlQFGs/k26DWgsdcByFvAxONMERNZeDBqGUPwXfZzCwOkgn\njpTjYWLAQ08sAhN/88dznOeiIMfIWLkMPccQvev6JvfEgaZco6iTgfB4A8Fh\nsjPW0z7cSZMEDSCSGllmor5RAySMMjaZg7eG5ScRbqjHvkm3FTkjRaOdHRmf\nds5lWYHrNnyAkPIJ3kkH6U40s9F2+fZIJp0QB7avLmzpWPMLXLgZxNK0OT1N\n5yLAfsYChYhysy+w0FOz0aSIf7C1eByzsyL8VSXKd9WqlBtiSpfOvGbyAZXp\nQ3jr3YSmZBhWbToWPXtH30vm1hf3FgakfI+NSy6skPoUJVxGiUOqZyUvEtg5\n7s7koP/4C96u520fwtVBzGiN+1fFABpQUYQDyWOeK087bDof2qfH89Eo+lDh\nheXO\r\n=0X+z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/icon":"1.0.2","@chakra-ui/hooks":"1.0.2","@chakra-ui/utils":"1.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.1.0"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.1.0_1608241164095_0.5867673490510938","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@chakra-ui/form-control","version":"1.1.1","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.1.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c20cb2e80023fcf1935640406046273412ada438","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.1.1.tgz","fileCount":28,"integrity":"sha512-NMf2rABRzc+h1NZ4ZotuVJUuo8KETRqFpHwhu9MimGm2X2RGwCdC6jnbuaM9EQXdDQVwfZ88UA/PGzDJuj1GxQ==","signatures":[{"sig":"MEUCIAacFx2TfKIiLBaBqsc+ETZPe8Zc9d7koA5Ie7N15aaqAiEAz7FBnt3bTU8k+0D0QDh2ZwAJAg93fT8m1IXUhZfisno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/ISACRA9TVsSAnZWagAAH2UQAJhI0Jr8ZsS9tS7Z08Zk\nt5II3UptL0Z8G5cb5L7qobTu7EMyVjLMw+Mdbg+b3ahq2XcoxbrupRQwGDxQ\nw3o7bjQ5ETuHT7spsz+SWWWGM3eLWJyBLy/Y99HKi4W2DMbNCxbryzWxYCsP\n2aV/8ZkEyd5AHQxMxTRUuikQDRcgbzZTy+EMNdLP1SCOxqUuZZRZ+xtMFYlO\n9LAbrebnSzHU4cVYIXo60ClX4bG2Az96NvenYiRqW758SZPRJVfJhqGqey84\n/OmfD3HLjD7jTCKvCGOqN4W5EXYnVwEIipiLB8+i1NCiTvoMq9qgsriGJ+wl\nJNREPtvJnZSjUtXQec4I1O5IBKhQnkHSaF/2zEjHnTSe1XBtJGdfRMxIyPOH\n2eCrXCy7CC+ppdlA+2LiPxiBtIwUOjSRfSFMltAoBrXvc6CKBuhJRdQadRcw\njLL9/FAxEw3SkxFqCQIL3V7gvGpReFalqEHC7TtHX/lMxVD1kz5Ev0pUm7W6\npyqLV4Cl+HSRr5CBl4ylRTw91LW3BcHuRj5VyiR9Ho3rECA1kesCt5jjpNbV\nbadWnY8bNuorFqhUzfeE+2ACrzq7b3bTjAMwbnu4RxJuqF3DuPTlGHiWxK7z\nbM6RWwSshGNpuaUKS7+ru+j1nKqD4xtszeVz3IPfOk2SLIJcEbkeiSg1cQI+\nODA9\r\n=Qh7I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/icon":"1.0.3","@chakra-ui/hooks":"1.1.0","@chakra-ui/utils":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.1.5"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.1.1_1610384511972_0.2844649838715647","host":"s3://npm-registry-packages"}},"1.1.2":{"name":"@chakra-ui/form-control","version":"1.1.2","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.1.2","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4bc6c4b004977842e31a35bc05ed388e1d5755db","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.1.2.tgz","fileCount":28,"integrity":"sha512-W6TmyjGHcbJLQ+hrtSpVLzJmYjvcrDI9hRIr08q4Jn04omS8Yt8UZHP9S9BIjEZ3/p+rtwh0X7HoGg+YI/25VA==","signatures":[{"sig":"MEUCIQD7eiPxB7lbLPC88+ns8UrklKPffNcWph5NziWpfmJrhwIgBEYZ09KkFdP6HBPP5bSj0ThBIlP9CcnQsrNnm2AipMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBJNrCRA9TVsSAnZWagAAM5gP/3OrT6iWJb0w7bn0hbXt\nGyfE1s+sgTvUYbFEwb2of1nt27Z/4wxl6+wpOrQSHTsEBuBbUSDfLNMcwRfb\nZ8/WZb3wkbpVp6GNVBZsCRJGp0ucR6GN6vmbf++LcweZ3vYr9zo1OEJrqgps\nuJp8ZJOZ2LFzFBDlOYVanft6kMNYTrfnKbtGDPEqtmP34tqFb6kQC8kwkXB7\nsyutsWsFORo2GLJjrGWqrtIGIFLTSJ71QxuNAHKZpfjPAyJFdIsLGIY1ANcr\n/534Df8GcEtFxdCOGIdeCpLa4snfmV/xEOpneYHgfduNRzM1VfdyuxZF3xTY\nnGCEBwAoCBJlMnxyqt559UC5XAAZSokKRvgFBAwJZJ67cvX/xmO8bmF16pL5\n1VN1DiO3Q42ev6Fl/cNYaOevp3YwIJDEbaTRzRD9ONUXEIDrutI0QPLvNo5K\nm/7SgqG2eDU+PD5WFsnSGrk0bJD5bjZe++i21oYnQ8OU9j26jQ5jdsMtUZUd\nb2EbTp7Hy0tqkB3hoPlE3kSCW95cS4Fwjw99vo5/s1h7ZVzI6kR2KvDmgm3R\nH+29VQkNZzE4XmDUMFyHu9JWhZjakp9Tlrbin0TNbSeWShomwlGQc46ItJnN\nTh2wghg5eHk8dLz6AOnuIXwHSDvzGYMOdNjGtslckhiUljTai8KXj9qEDefL\n3mM8\r\n=9HVR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.10","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"@chakra-ui/icon":"1.0.3","@chakra-ui/hooks":"1.1.1","@chakra-ui/utils":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.1.6"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.1.2_1610912612427_0.7391237738653114","host":"s3://npm-registry-packages"}},"1.1.3":{"name":"@chakra-ui/form-control","version":"1.1.3","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.1.3","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f09f2ec6926be474e79e5d5df4678a881defcaa0","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.1.3.tgz","fileCount":28,"integrity":"sha512-0CGyXe1uc0SlhhU+ZKBxPuitV4hp1NXcPlVmmMyG5a/+WgdNV0FhhLk8iJrXQNqarSWgzuyFeHClFlwUjLsE6w==","signatures":[{"sig":"MEUCIEykbiBhjq8hyzBcFGgtceb+LZu43/GzJn1hCrEI3RyqAiEA/daGNph42QsNMK91dwPbaA1J99/KDGATpr6ypLWjP0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDYusCRA9TVsSAnZWagAASjQQAJXkVF8l3OnhlCw762X2\njBPOV2nKzfHcusHpqAa0mu3dyzSxocOUb2WTD/G0wDsFokLwwXmu962OnpRq\nOB9rzT5RaxaEpQhbQFNbSCuIFVUjk+AAXQusiiWjN+7sPTAgfkIHiCGBE6ES\n7BaulD6h57Iz9QpvyTW7RGiAhl/2LmfFTU+eS66CdUU2C4FDxJRvahOy1jir\n21t5tUF3/ruMBBsRd8xTZH6TF6qBAXKMFs0bt5Ez5duuOxRaZGSjCJlfnQKO\nGvlYQdPcUBVXsSMh9xzH0lWSpv3jQjfk1w7kMltqMQCsY2nkqeabE3dC05m4\nBmqdo7e5qagnhMnIyNeaWAwlQn0qQX4A3TKI2GQ/TrXI9JOG0MeiyWMkUAH/\n9cz81WGf5sJMMWM/AXcQUSNbWeyl3xLxktUHxSAk6xGG9X/7vJNAqEB5DsXU\nFSAmggQslMFWWf3ueKuQ2daoIMjUnSh66TAKxIHlXuYYbU4JsIVD7YNr3Vtq\nYtwqXAx6urKkcgi94n9Fnq9b8gEhaxhQOptbHYjwXEDmS8GAKK9FJhP+Sot5\nb14pIKTwNNqNOT9fGdkv/Yz2rh95CoSeP9lWMQRlh9hDroTfTXQBZEU8qDZQ\n2hkzRwvFdo100VOlopld3OzemiWrlrUyu3o3utGFk2yFmMnZX6i8fsdorCY/\nF49m\r\n=8fbd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/icon":"1.0.3","@chakra-ui/hooks":"1.1.2","@chakra-ui/utils":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.1.7"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.1.3_1611500460296_0.37106949738125716","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"@chakra-ui/form-control","version":"1.2.0","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.2.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6a81abb1f11f0bc3c3e68f05d4fa48e2a968d85a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.2.0.tgz","fileCount":28,"integrity":"sha512-kBYHHHZ4xJY5fezoYDCYHCcNmcntsC3Lkdis+7JanR5Dnv2478zDGyQ0brFOuWbRHS9VfNJEMnAMYUXaYklcjQ==","signatures":[{"sig":"MEQCIAd5dSc5ssbNBP9Wt9KqLV6Appv8GPF5dvF3xBGS9MrxAiBExoe3z2f6x+nqHz8Gwq/7/b3X4ngpc1xldtNccKfcAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFdUfCRA9TVsSAnZWagAALzEP/jSV0BPqAt4exjXq1+nf\nOiswMDyxL9V4pxmkgpD1RNZWSMEvybboW2lLlFZ4UhMOrZt7wHJlerkTC+wg\n+HOEIntkLfXI3bT4OUj8rD0x3tE+hOnockigY8Ec0DSPH2U9y3A+S/R5Vl95\nXyt1X1slcBA0Hi1/6oj1K3MrZBVbaRJRs5hf46lDS3MC30ABcDzpQEY38CCI\n23TaqxVqRZwsWDiOqY0eUdVLxL0jojsNZy39dBb3+TV+Cz3Vib5m69hDRAJp\n0uwar9JuZxOt44tz257Wmxi/E4HW5Xwuj9lz+pFT/gRUrKq5L9Mf8f6xiVgi\npCdQc5rgQqyPhSWxFUnRJ/mi/Tqf351E4B9HQET7qwTvVYdLLfX/FIAKNvNA\nE/C1VzkgH1FfJqtO54hLfTHGvOBbXqUx3Vecan9FOdQONc7vQFoHAa7DWNo7\nEfPkCfGwXc/SRfmJFHC1SjLPjnvHKwTeaqC9Y1qbeMSAHr/dB2ZDiTc2y4ho\nZPodKd79+bwlds+cN81iCdzX1Kq7HMRep91/0cUATQAkK3nE+wZAtuR6f9dG\noGSYXqiebnRMCWjJTix9ccykSe2iXT9LRBeZGgiWhyNSIxjq3soyIUW72t8E\ntC8mn15mZjfy8mp35/dOFFzGxxQJnFDmVBUCzH567JOnc8HlfnAb4EtSVNNF\n4X+Z\r\n=/nvU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.10","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"@chakra-ui/icon":"1.1.0","@chakra-ui/hooks":"1.1.3","@chakra-ui/utils":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.2.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.2.0_1612043551290_0.6120633977217855","host":"s3://npm-registry-packages"}},"1.2.1":{"name":"@chakra-ui/form-control","version":"1.2.1","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.2.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"70693011fdf396c292aac81575caba976276d385","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.2.1.tgz","fileCount":28,"integrity":"sha512-pgp34e5DRHc8B+wUMxZNYBo8W7f2TdIOm04dO24WIIC+mPIu++QsV2O0SPOeN+WJzbirtq/8vibPmaZOfBdQVw==","signatures":[{"sig":"MEUCIEfz6mB9SAdyWcLi/x7/7SDHAWVTaabrdhz8yw1YRtnNAiEA1YicJ/rRVFLUoiON/rueMfodaDEBHAZUYkC70Z0ul7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHoA+CRA9TVsSAnZWagAAWU0P/1T1rsvgonZdbgVMO1Ja\nlHrrbq4YnPhgHwggFH/f5R6kSQSWI6kI+buPBp1qcYjEHHNpWgPzVFzQnFo6\neGsk6cof6gh4NSP99TYwU/XruebwK+HePcK6mzDqoy5JmIpl6dNFQe/GQxRv\nn8L+wIQnZy+Rl/QPu3Twe2bdmz0QGJ0T4Bx0mVUXR90rKYRMt0BaiSezesW8\nYzxACxsP8F9C5wx1hSsco8syV204XjGWHxSVO1sdPytikJbB2pRJ++KNFX9L\n6OvCZClNexd/vcxhws6ThBqnBtlL3kybKHbfVOLnsvFLzzANp0xkrfh11c1u\ngABgWIorxtsOnY12SbMoLNlnzPJ3QP8mzOiX71ojDVYii/ALc1qcWglhMRXx\nyGp5c7jw41jF4GFq+ViPk9VTNfVLBf/yuZiZNKWZ3ukdw6GEH/Bs0YYLX5Wl\nOY/ZjEcMrG2AJO7hbktC1DJNxX5/ZotiBoSYI4H1oSHYvkOYvUP11Uk62Vx7\nXFgTUBfcSBQk+CHxB+20aGkUJq/Vennd3AcRVhy7R+GBQT0YRh2vIMjVwuVl\n63Efg2b81HXxIGnn/tfat752/yhbokYum1rgQoW0DbEBukiWv2S7fWe6tTjY\nvnpUn1AmEAFJGgcP0OSOCHCF4FFYj6bxN5X2diC9s2FDXu9+DYhZDbNKyvmH\nHFB2\r\n=ivuG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.10","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"@chakra-ui/icon":"1.1.1","@chakra-ui/hooks":"1.1.4","@chakra-ui/utils":"1.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.3.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.2.1_1612611645577_0.576745185753601","host":"s3://npm-registry-packages"}},"1.2.2":{"name":"@chakra-ui/form-control","version":"1.2.2","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.2.2","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"88d75491e59f0791dabfdaf032e09360a59e7d67","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.2.2.tgz","fileCount":28,"integrity":"sha512-p/tLw25/0NZBeuv6WG9NzRfPkS1EfIcs60IWu7ehxvNrNo4TAzTNkp9eEeSDAgpEin1hlAEBWdi2ZzgvK28qEA==","signatures":[{"sig":"MEYCIQDt3IHU9zzlOruDkE2bP4P3dgBeeUxN60GV7FAzyk/mggIhAK6eTAQ40LV7YK8nxRtHLryBD3tdC5N+/CBL50I6lUZC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQo3YCRA9TVsSAnZWagAA8DUQAJnWBzuJ15zYeV+g9DC8\n04/noOHWKV7Ee3c6Q3ZtIA+Cen7sjzAfF3ZwWr1F+1pGg694GmJxhmZduLGn\nrKIL1F5ZxJWTDhVaD/v7s7YQrzDB3WNCW3lXnx3N5hfw2ZSXotunXz+25LNm\nF4wY6TY0k+7di6M9ZPtdfLtXQtzFZKkr8dMEpFLvvhKGrDdbnth032ECyFNw\nIj0xQWiZ3+Cri0ab1KSszEAMUVKG3BamsIZbx9z1kMOeoK/tlC995Gzd+Ka9\nw3HlKDNfc2rOkG8U+legJ/Qn+cRQGLrdLDVmebt/ZbW1sFWI8HMRdIMnQYBn\nmyW8mnxhtcZ6d/EJDawQDMZk1T46H6ejl7pdnF+ZiTT3ShrL5/8YeEhBgUVG\nFE8RwkWUrtqr3oRzHaO289VORVggTrFCTtWccoGymqnOuIToQum5ssf54g8h\nRQguHvCxUEUs/ej6s7gTMOYMCB0+zMTfo2JaKfDP4/nSvV8hV4cZuf4V84c9\nQviJaDIPNg7+duhaG+NQBtiZUEAK8QkwoSLuFQbXWkpvPnFM/hUNcDWwZwZ9\nIcZKK2w4ksbCsNzhOVfI5llF6vrHW2hcRC8+6GJZbgcZ+F+WvfuzIPktTJEh\ngtS0YdmK47x7CCJdQpD+tSqDDbiouwnDMkVVc2Hz+TpzsKGGIa6a3HXXigLH\nTmok\r\n=JGvf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@chakra-ui/icon":"1.1.2","@chakra-ui/hooks":"1.1.5","@chakra-ui/utils":"1.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.4.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.2.2_1614974423719_0.6242415781653008","host":"s3://npm-registry-packages"}},"1.2.3":{"name":"@chakra-ui/form-control","version":"1.2.3","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.2.3","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8ee931d769c22afbcdf62e304751de9a440130f2","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.2.3.tgz","fileCount":28,"integrity":"sha512-FwT+Bet7wHg4yPZBjcJd08TVtHMgVc33iNT1gUKluMskHH1dPiXvgH0+bNLlQcjO3869qP6rqG0ul4BuWga/XA==","signatures":[{"sig":"MEYCIQD/isQln4PIo+rVFrGXwMlnjrtHREoEoP2kFnUBxrRndwIhAK0gcqIM8xX74eYXjXHchlrW3PWyp5JoLRItBn4RSFr9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVukYCRA9TVsSAnZWagAA5cwQAJ4F+LRLI334U2cn0UOL\nDgDhi8M7yoMpR4AiuSFDsXq2cAhmP47eV04yWezAYqVxyPgiPh98moRTWiMy\nGNuJ1aBHj9wV59rg12gcEYdj7G8FoMzorbYRbbm/3iqJh1+xom94V3HzMWV2\nX2ZRrNz/bzbKqNP6ZSXhQSK7C7Kgak9pNjimehSa1C/5sQW+E7nyx+liLReL\nXGfnyp8aWVsZtLQvwaTd+l1FdUI+iB8xTmQtCaJ4dlbQCGh6MhsabMX4UUtq\nN+XeZ37Yo0kP18Tj0oboO9xJRQsylyx6yD+Zz3l5TvR3QQe3Ovu5sZ15AvbS\nhfR3NsS9muFwWnz/RH4uA+MdZHL+XMwScPS+FV4ifpa+sj/UrsLu1mwm1Kcz\nIHGNZrEYPixEcE+CTN8FKDy687IuFtC3w8f+OpcqYCSXWafEUsBT5KDweShj\niq08kXXfXd7/RcIh42BovYRhc+A2ZLtMhh8+syZgi4s73+CySV2puA+FG0iI\nkk84ud5OH66g1Hgtz8TEIyXIoU6GFm+DpFVe1nXvQlNt0Pge8JocpxprRlO2\nhlhJDpxI1vNEgAS8qJQRhQxyCERgRjY6w1m/Bmf1bmupQMkgaG9rIkdPJVuQ\n4btxbP5Nx6a5mb9UbZa7+xIxWaIdcgpq4DebpvZvKl5I5YA950qtqDSRqXn4\nLTFh\r\n=Gels\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@chakra-ui/icon":"1.1.3","@chakra-ui/hooks":"1.2.0","@chakra-ui/utils":"1.4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.5.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.2.3_1616308504121_0.6032619623948812","host":"s3://npm-registry-packages"}},"1.3.0":{"name":"@chakra-ui/form-control","version":"1.3.0","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.3.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7bf617cac19cf3e46ac84af13eb977845a155dbe","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.3.0.tgz","fileCount":33,"integrity":"sha512-/rM/I1R95ILPTS0iExzEt1ycgv68OjyH8Nxe1mrEEenA3pjoH2dKWbAK5mnEWjBR/sk70sb5oiykiZJUTZ5DjA==","signatures":[{"sig":"MEQCIGEC5sNUFK0n3SkzKfqrFPpk6hSDkYcW9mq5iIvg+tJ+AiB3eD3VloC05czdQMh6OmLp9fMM98G2vQ49WHfWeMtmEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115828,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYxjBCRA9TVsSAnZWagAAhjAP/0Pr76MQmD1L9aIIKBk2\nkGefKzgqpmcNoOqxuwNeIGwgirZaaWMkJO9GoUgasZB9bFiTQmMyI2Gr4zfg\nkvGm8eK5ym+CzwJAQC+QF7x0x4bY36QkhDr2e23ZJHOZ9jIhL6ai0HWo3ca2\nXRGQJaOEbqkZOKQ9xNQYCExNHj92skWr1JomBBu5LI1UHbfluyp/FCBQ780H\nUOWll7ekphlVgKw1Q8T9fY0wcXNUfiLyTG692b/MMR51gTLoHDEpw1OkQ/yW\nfjjIFyM8Vn+EthAaDWE9F+OCzVuLSJK1WAlVI42nihk+tsbFpvVbRvFdYbh5\nUpWx7aHfDVcmGuZWWYtUBGFrc6m+5vNRzQoGgT5qkH3AYjCDOXe1OOdaAJUe\nexNRLO3gcnDGYZe/E6DW9mb0A5Sz/kZPJZgEFnoEdIRly3XFTCBMFdrwoGoI\nPGg4G9iawb6F8vgAZPAuK9A8u+SJ1Y4WHo0fjPcShIXKtEq9Ta13TCTQ/kCr\nvNSNIQ+lDlSmKkAphBTOKxntLNca4eOUJE1iE9eoOnq2rB2y51fn3dTTYeS6\n5ZK/HRcHrH2cNvwPfPkDtO1n93Uc4ZZ5zJ903e8StfBsnPUa+L/gypSQ3NKq\nantXq0iOT3UCHTnBlPdLuPo7nGw6fTYyr1qqheUy4ieNYu/B1Hc1D5a1PS/p\noVXg\r\n=ZCEh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@chakra-ui/icon":"1.1.4","@chakra-ui/hooks":"1.3.0","@chakra-ui/utils":"1.5.0","@chakra-ui/react-utils":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.6.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.3.0_1617107130497_0.21392717431791763","host":"s3://npm-registry-packages"}},"1.3.1":{"name":"@chakra-ui/form-control","version":"1.3.1","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.3.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"28db8a019c047e66d4a39498434ba3668e5ca8f4","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.3.1.tgz","fileCount":33,"integrity":"sha512-UDw4MnabC/Hc2MS5LZaqB3BD3tyz8HO0ShqtasUlSm+TzV2yq2fnCFDEuDhwFflyHtnBAhFht73ZaaWWW7RXeQ==","signatures":[{"sig":"MEUCIBFE2KdAsSzC+Mdsibo7VRXfD4kEAIre6rEjiBcqyG9wAiEAyldytLLE49Uhxg+GXp9tOUge1LnUBQeAtuUeaN0e2/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbcquCRA9TVsSAnZWagAAjIMP/01ZNAjeF7w30mCyN+7n\nlVQwrUhlw9LQuO5ZiO3FVaIbiUvNFtrylccFZEmTtyz2ee2SH+A8/Gk/CbvS\nKNnDNkTxfo37SrGul/kYln8U/brX8bZlLu5EmgKU8Hbx3UaPeW4iye8mhHxK\nDmkIzvrX+UaM/6p/VHOH92mRvZg6vYkfCCzAlFHHsedvdiV3d3K2QsH8rv9W\npIVWQ5HsjSZ2wSHucKyPL7i15Wj9IRWB+amOkjKRhSjwmPV9qoIFlUgZiXuF\ndMCmEg5kvuzcRvAv9DnzTMyN+mwIuxwoOnRvgEBKNC6Mu+l5zCJz7qviwrfc\nmL0RFcrPUKqMJ3nNiD/jEdULFn4Wrkf2bzQh6e1bB2r64JARZZqm+UAUFUvw\nuiCM0JL9qIUw7SMJURywbv133FvHnib2EvQKpNl+5nGtRe2eLutsQuA1rsSQ\nCK8tkSMm48fgsJpR1QcsalBM6gcIsKl1v/BXQfgG9gdQ1PEeqeo3C9SsBU/a\ndn/GSxMj2RByBe4ah/HvOc4VDYtSbbOkiPWk5Vw2CLIXlRYM/6F5XRPxcr2f\nFGtNWsjRsAquFjLsytavfgRim5hR8foD5eAu5WSTufVtSacxUAG9PS6Ekehn\ndMQ3nl/8yubZirJ/1scDHFz2j/Pq85DtVoIkMfSP/BXaVu2st6z0U1CQR/yH\nNFoN\r\n=DMzs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@chakra-ui/icon":"1.1.5","@chakra-ui/hooks":"1.3.1","@chakra-ui/utils":"1.5.1","@chakra-ui/react-utils":"1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.6.1"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.3.1_1617808039949_0.01758889891579507","host":"s3://npm-registry-packages"}},"1.3.2":{"name":"@chakra-ui/form-control","version":"1.3.2","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.3.2","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bffaa16535ac49d6f84464f62ee9fe55cecf6d68","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.3.2.tgz","fileCount":33,"integrity":"sha512-TEgLXByUnYjK3pHYJVIe+O6IAnzsLOxuPGyqMQEzX1/YQfjgNJvZKe21Gok1U+RtBShvIjfVhpn/oyTliruZXw==","signatures":[{"sig":"MEQCIBwoAZZGJAKiHaxG/iN52PPpDeMbQUtju98y7QQv+cPNAiACkQnwX6oyKF28JsaN/96qD4DwGJy/Wa+Fjo5+8MOqRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdhcxCRA9TVsSAnZWagAAI44QAIjspZMBQ/JZcTkMbh4c\nIDrE2Zvtm4cXjUnqtpcWKCTgctjjAnE+dg5s9/mq4dCtBbs3yjTuDiUSK886\nz5WdQZf/VCT6SQmiuJc5VYmGj99dJvkzzTDQ4abb99U10qHqIWTp3OxlRTiB\nPCo7ITE1hKLtjqPHhvsoZUTuALSBIStO5af84Q/ubO2MMzElDCem2TTZ7dpm\n+EbwPYH8gKCeehD5o6xk1rcyVtkWKhY+WgIPWnYEJ+1s4VDY1m/dQhWt5IHW\nWfB/ZublPensFC0cdQhy4PT/F8XCNz9GVdMd+g4d5YlL6WiTQgMOQG22mOW4\nC5QxRcBWXW0FAcpdlPWM8zbhP66MisdglfcyJP9NNl+V3660bcCDwX1zX1BM\n2TN636mvrOHmEMJmDWzyl18oFERHYm63mYpfOFqGXUruvpu2c7z5tfBBMLJu\nQmRMYIQ7um5zURiGw4wOo70wHCeqC7g7VtyZhnDFtluf3Qe8hLwX3/bh1Kni\nj9KSf2zJKbimxAVJ1yOj5u92SK9Tv+gYY7bw5Nk45Ub9cibW61fmmfZ8TOYj\n9Yz9S/7Q/XaT2ld3XZmDRtoYgDA6y84oWyg+kSBSdbvd7t3bahaBwLN/7XTF\n4/fdYhaUIz6jo8doTA0cCA4Z38UG1UmPNgXUzQSYk6ZEIHb2GXEvrluvu05G\n9nsp\r\n=TZk6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.22.0","dependencies":{"@chakra-ui/icon":"1.1.6","@chakra-ui/hooks":"1.4.0","@chakra-ui/utils":"1.5.2","@chakra-ui/react-utils":"1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.6.2"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.3.2_1618351921258_0.08872693045831737","host":"s3://npm-registry-packages"}},"1.3.3":{"name":"@chakra-ui/form-control","version":"1.3.3","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.3.3","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0e501603d154e2618cdeecee45712fcacd245caf","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.3.3.tgz","fileCount":33,"integrity":"sha512-KuZEdXtdWLEdLS1e7WPLq4KllQ4YVReaD3sEkwWz/XitUXH3+PZgtAYbWLvckNpRWu7O1bN3nR3L3qcWwnaoig==","signatures":[{"sig":"MEUCIQC8rmWKDz0drZXXbfUhRm9pIVYCfGdp1KAV74Gz/NrF5QIgNJt8JffRB7uyQlOcNzVWwa4jZuId+YK55fRuT7cEsxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc3mCRA9TVsSAnZWagAAUbkP/iokE+JGvZcqTkyhmuDu\nnNtmIMsJCf4PKgENAPARhgSSrfJLfJwjkAjy0BuyCWq/bs1MArD/snAtx+zp\nh3TMFaSw+aUPLR0aDQJ4Q/x7TY47Qn0kI8B2JbM2rlwbU64+U6l4P4isVTkq\nMO2QpXYGZwyibdURNnvNytqDiGwh2MUf7JtpwCyLCEz4YHTiJ0WjM45DNuB3\nAXaQl0PiWZ9NV7dYGd3yHc7oh6w9UTS2WPp5qBfWPQqfiaS3RVW3VWuMPXCQ\nyvKjY+dMebVAUN1mUmgXeznEGF+bUOFCSYuoQGAWBXIIhIk6ZuhP9oWoJCyB\nD+ZXG/kh8dMayowEISwD2Tlb8t5IY1pYRN6b3P5XCRWs3YOJnksCOUiSipVB\nh5KJBNYRA0kOgeomgFjTrxcztnGVN3cr3YcvPApgovfveDH8hnghlNp/hqsE\nAOooumgaR9Cr1V6duM2qiB07B0fZJQWNXQvHwHQWRazr2IMvsaXeWwk84fFv\ntgs/h/to5GfCfhvscdI7wBBhEfLVinLm87DGvTKm4eGZZIn0CmIv6ZdZ6930\nI224dt5vfj1GtcOd1jxyQb0PSQAisxSg1elCdgP6NVzv5U9M0UbCYiMLGQvf\nU14Z3JTD+BBfu4eiFYbWLlXMtOg2/HKArOt4LzE2alRCOBdJqL2tHW8GKS3d\n5baP\r\n=k607\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/icon":"1.1.7","@chakra-ui/hooks":"1.5.0","@chakra-ui/utils":"1.6.0","@chakra-ui/react-utils":"1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.6.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.3.3_1618857445269_0.24168169246263282","host":"s3://npm-registry-packages"}},"1.3.4":{"name":"@chakra-ui/form-control","version":"1.3.4","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.3.4","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"dd19693cbba5ca19ff4a70a680011509406d4b7a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.3.4.tgz","fileCount":33,"integrity":"sha512-BYJaZMhvAo8csqQ9mNp9i4gACLr/DraJstF1M9WRKjlpst7WK6+bRmG0Cn0ifx8EKfag3VaZMf/iOkoZjF0xuA==","signatures":[{"sig":"MEUCIDv3cl/CSePoc1tZELQ+51Uhj//CeFzhkTqs6n9ULQoGAiEA0I7ZtclZzaILyvx/O+VfjOCkNueXyfWHtABcl7rx3/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":120007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwv8CRA9TVsSAnZWagAAWc8P/2Zme+EJoV5NQoLpu14n\nxmn/sJpuqpQF6qJojPD1CwKaQ0T5qhQ5sDFzZbAt1EGP2PBmdvk3TNLfu+Gn\nCvNqJpGNW7TgofVEbgJaKADux+hB2y6sfg3WDuoB6hx/6M3+WSBlOFXsQf7d\nTJ4g5lpQn7dg1LtsiHmawXMCza/O5kUN8OWnIBtdufugcbo/XixQrZDlMlOy\nKaHVMhZq3OUasO9LHk/AvxyXNX71zMFTkWFSZUP8FEQByAucZ7foT/JpxzL0\n3YEd5bdADdkBDa6WiN6yCB++3JTYVXrGtyHtjC1YIVQVsgWvqnOvAu+2cucY\nm3FkaD2WdNVzKDscSobNkczAarwEmdpqkxuCA7TXYKyne5ND9WTbUrcsIpZ7\niTs7BFsV59AuAnrtctxr38PG3a30S5K8nOSzvHWXqVCoQJgnjZlhv7SGguWK\nRJEL1usL9hnqTsxd54F1N3sXvBKgd+HN6Z3CYbidkJ4LoEwEry8ESu10iUhx\nrZtkm60Nba4BzkdprBLH5sCiFE5HKxxQMJc/NJt2hE0m/WETblEQMiilV/KQ\noccsaXZjb0D5g7TC5k9bWhsHSTxmxg+JnTrYnjcdo4sIjl63mdbLEDtL9Q+x\n6K59CofLcPmYDKfAm3hVAatu1B7oAeiDPLAAbEBPs5+VGi5kvIWiMLdfQOiy\n5BQL\r\n=W43s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/icon":"1.1.8","@chakra-ui/hooks":"1.5.1","@chakra-ui/utils":"1.7.0","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.6.4"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.3.4_1619201019953_0.4064105510744538","host":"s3://npm-registry-packages"}},"1.3.5":{"name":"@chakra-ui/form-control","version":"1.3.5","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.3.5","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"dc7514f966e4e2cc083d139bf268efbeb027e935","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.3.5.tgz","fileCount":33,"integrity":"sha512-gAOWGyWzHp0IFHnHfeWUBFio7dsJvcpbFDguX+RlKZBIGYA7bjRTX8HRXW/T32sYCJn+2A3QJdh/oZjegk0+Xg==","signatures":[{"sig":"MEUCIQC3IpFv09zDxNQoJtA01KUyf3sfBBQxmY2yqibcwOCYEwIgE/1IJZBpW70mib8Exsit5eh08NDLK8DYahjMjma6IVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":120562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkn2pCRA9TVsSAnZWagAAFDcQAKIqgTVcmkx5I8l90jHS\n11C9MAMUm+B3hAyTH6zuUrmI7jGOWdyI8P0eJV/WVyHfde3nUXlOEw5tLsWN\nBxHj2EN/EEmE84DkUBZ05qucO8IuspySzVx4gx9/jV7ZG8oeDqjQpppOVP+Y\ndA2rTtiQaeeDNgPMQ86F57whswaoERxKbJst5rnUEn/RYybu0Czzoo+eTU1/\nOEbanj9yJfYhMNG+zN35Uo4YIJ9XCZJWXxTrcUEzxo8b9PzW2nWDmoaJm9wx\nvwIO/+oUkRWf4J9UWIVXYV0mHG+dPRnHKZfE/6I/VUndLvLnksx65hCAGMSC\nKRPW3SOHereON3W3QqDNQLpnn9NRNW7sfAZJkLmYHzJfNl/hwEKn0+kEZbqF\nrAb+rtBM2746b8oFieCGuk6OhGEv+hrM+joOzXj4iRwNAPYxqlwpEQLfbTLd\nsxBGf+HGRKOZ2gV92bdUrn+Xlwpz5831q+00ST97x3caPPrx29PNc/xRCr5T\nKSpkQAPjWA9SWIZawd9ipmyQZPsE608k2Mq3VQMjDdFywTybt1Nhk/dEgGYH\nMg9AzT4y2cjuKCW7MrWZ/skC7XFOm60P0f7oLCcsopBEsCyIXadc6ReiJeI4\nLFfdRTVexgaFNGBhLBkGMipwbS8+oQWtcA5iGUVdmF3cCEz28QpzvVohFwVd\n2PMY\r\n=3/iG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/icon":"1.1.9","@chakra-ui/hooks":"1.5.2","@chakra-ui/utils":"1.8.0","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.6.5"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.3.5_1620213160677_0.9367696252462587","host":"s3://npm-registry-packages"}},"1.3.6":{"name":"@chakra-ui/form-control","version":"1.3.6","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.3.6","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f2356551d3bbe7ff50f024d2169a08132467b2a7","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.3.6.tgz","fileCount":33,"integrity":"sha512-C8tFadZP0Gb8LRKTZWyFbmeGxr5tR6aL0KqIJyGWaUw06I6O2mJTOTsFKTlAN59eRz7C8r4S440eLbhWIgiYLg==","signatures":[{"sig":"MEYCIQDJp+K5mTdfbrs51wmO9+t8trPwzrzuQWyPTa/RuWdzLAIhALh6Ktld+qMwaMh2q7YUQDD0mz/AzS12C1C55jviMOGs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121395,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoubsCRA9TVsSAnZWagAAYOwP/3KFLugrKev/47Gn3lw4\nIxyrGRWZ9kCG9qbEQyWzuNu3NHopV5+3IC4JyVY5Ny4g+2N1Y9Sb4/WizTKu\nzp+BffmqGthLquKCi+UD3bc2RnQ+JiYoeAjuRQXzXL/eLkmrHzTyFY/7O5vr\nYv8kaD/CJMhgzRYW+47j03BpY3SpDGpskacyJj0Bf6EMqxT5uWmhhYt1XYOd\nvgEKC/ppURBBXUhgrL2A5nW0HWzYMuJWGHRDE4RibU/PNAZ9i7eajQBd2EON\n+5Xsq7S5pmxsnxIpQy+QNut6npgEZ8b/Y7qiAH7YOaO8d8n+4pB0/wmZR0gC\n5FGfAh42JpruD+t+0v14Pq0cYlx5Qsqc7hxql3GQHyLx4mOpNiHPEMKwPG1A\nMhFNlLjUYfmD3McOaQf8Q5dVM+GqELcavt8x1Tyazy5SVcxDwI1PjaxaIg1T\nXraMtcx5ExfT4WJYdNzSyHNZ4B4VIIlukQDTaB4+s5LcIu9V3jrujb184kO1\nzjU7h45KkIpf55siJPtHNSc95sL9MLmVYdEID5E+bMljTY5DJmJrDSnrq5S4\n3UX5oltMDveXg5QXbQYHaumIcs5FnWKjbfQxY1EgMAOWOxyqZXZ9P7lExqNv\nyiq6mCf3d+DeISkQrAusYw0DYuITWSKZf3aWSsWv5P82ul8xrHInZm5oa3vp\nZBpZ\r\n=mPCD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/icon":"1.1.9","@chakra-ui/hooks":"1.5.2","@chakra-ui/utils":"1.8.0","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.6.6"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.3.6_1621288683630_0.923625002339584","host":"s3://npm-registry-packages"}},"1.3.7":{"name":"@chakra-ui/form-control","version":"1.3.7","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.3.7","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5a9c7da856f3b4b7eae39edafa2a41a0a0d1f01a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.3.7.tgz","fileCount":33,"integrity":"sha512-kXrnhI61SYbf+OL4XM+iMFS/OjdqfsIJo+BHNfTC8phY9xTbwnzTeA0kzEwcZa2n043ICzcD5O3QpPf9Z49Kig==","signatures":[{"sig":"MEUCIGPs9KU7na5ZTC0DGORRqkP4mXRndTsn42+Xeh++9qInAiEAsH9OXYBbzqYoZ9DKcDyPfw6KRHl3J3zFKo81NgmwNlM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzNnzCRA9TVsSAnZWagAAyjYP/21DmuoLtodBYYdFLyRZ\nbv7HZclnfZ/kEuRzKXdkpMZaYgkkkdTmpiMtnIEA6mDyBPFaSpKY317+K4Yk\njic7+6hNnIkUv84iYZuessfOUcW/Fb+NO7ujGdPgz2vWgcktspqZml2GeBCN\nmp8QBwh+N2iOFGNoKeLaybHJWyQly6WBZRx9jm0JPweQegjYj18oRy5SvZmI\nXIiZ8O6TmmYWi/1FIoKjkULj9m39x+S4Pus0B4J3FwVanevxYcrEP1lmD/5j\nXUC0e6/um+AuNvbBZwhHGG8M/XEqHuwqCUG0sW/9el53u/ZEc5qWkLcrEvE3\nCD8e7IGc2LWNBc9FadE6HSxOuTvPikPQfw6ImcAsIk+5g+GxxCApNQJ21CAV\nMMlm3AZWInTQ4/Rp/A7PmwjWg5WFEhFJ3rGz8uF4HC5qvNUEKG0hBiogJqrp\nQ0qNw4s/k691+fICVwITfklFrDLiCKh2qcRNlBPo62BzLOKazMIUIO7by2D9\nF+l8vtKQrP2y5srpqw+zwrxaFOhgWEd0bRCTTZiI0KddEJnDuTcejiSRh1aV\nncD8cHja1jbs6bjw++nY326Jh/u4ENtPup+K7lLTDgx2UHwSHCfpEeSOA5JE\nxmD7Gv1ZClo9N1vQ/biLuHvUnVBdFK71eO6iZv/PkSnUUIs+iC018CQxsJdp\ngilR\r\n=YbXK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/icon":"1.1.9","@chakra-ui/hooks":"1.5.3","@chakra-ui/utils":"1.8.0","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.7.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.3.7_1624037874831_0.5527136985441723","host":"s3://npm-registry-packages"}},"1.3.8":{"name":"@chakra-ui/form-control","version":"1.3.8","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.3.8","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4369c58ecdac4f7c5c23eb0a568f6b6618e8ca64","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.3.8.tgz","fileCount":33,"integrity":"sha512-S4zHu9ktuUeiqFC/ZM95UQ8CrnJvuXKfFRG+HsQrO5JjvaiYl0YjDE79Bi6+oj5WHjz0Zo7t+px+LAjxn7my3Q==","signatures":[{"sig":"MEUCIGGf0JGooWLYuvZSBVpXRty5PjiTYKqwHctRe5f6H9nJAiEAkqZt60euG9XWaIedJ2C2Cqjo+Y6qwqJOqjUr3RGov0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xQ4CRA9TVsSAnZWagAAKyAP/REaxdBKnD8fWuN5cQBj\nf9UfJDnhbEKM+7+w5dTo68f/mC45GWbOpOTelAIc6qp2Sg3K95E2uyAHOVxm\n7kbrbqhnf1/UTelINCjthrPQwrZS0osYSpQ4TS5xEQd145X9Nm/1bArx/h6b\nZ+Vw7gm8LJpxnY5uwjlpGhN6bL/SCBc85Alq3Ai4tw4vnPB6ndASNdmMMjYC\nF/iOqcR+AFcJQeWBkjOgc2LD18dMC0ILYgtXbyKIukhCYKkt+MVq0RcBOlS/\nLLAbNPY8pmKSB58eSVwDE24a2et4gHNGknomHovLfR6u5M4YdzTrAuMd7AwF\nCS4tJxhhLXHWQ/n5MpJ6W6DWZDwryao5gxPkD+KajM9YKxb0GGf0exHZAT6w\nc4GXGsH3J0OWanPRJpIxXQhSsYJkptUh6SGNpbb0POmUU/wk0pJY+AC54s1Z\noP+G882qpzrB1oTADuVbALmEtH3B+i/y1hnXwjSxaJxPWvoXBl3NcscAb5el\nlaeFZFehupxERApYVyYbKnVJoGCdTZd6tWbE8GT8AjUYnCGOJIf9ufLj3gJH\nZTbT6imMKVf8ScSiA/XX1CEhUprSIDhJfNPuH+1nW5i0+H3NNvsV5NTqo++4\nPIpdgcofbGJHd/b/OkeO1UvHXjoNtyOsLmWcH+cU+S+n4bxe4vtUPhxA9b6O\nAXyP\r\n=EAyl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/icon":"1.1.10","@chakra-ui/hooks":"1.5.4","@chakra-ui/utils":"1.8.1","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.7.1"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.3.8_1625756727565_0.8476232067597902","host":"s3://npm-registry-packages"}},"1.4.0-next.0":{"name":"@chakra-ui/form-control","version":"1.4.0-next.0","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.4.0-next.0","maintainers":[{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cd65966296e14b6555eb09104833d06c08a12b54","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.4.0-next.0.tgz","fileCount":33,"integrity":"sha512-lvWmHGnkEMF4/JgoZJ0zi8Tmi01YC68dIzSUldhwjI8BbpSeoGlWVDp5xHSzvZvwKtxUn+ITm7c49hJD0nbhag==","signatures":[{"sig":"MEUCIC6tfunZ5DOqOShOHaQDfbK1i2rnoiC4T4HTvUeH5f8MAiEA0UhYl76MWOr4yhf4XVolFw95LFKKP+Ok9Aslly6FNgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDFP3CRA9TVsSAnZWagAAQU4P/jYXExqXwuYqH7eFqysg\nwy6r5eiICPd012GUOSnSDW2CyPZvD5UnCmeH5LeoPSd9RwC6OSZVd9ym8KUd\nyRqXd5yXLNT3xZJy3YQzCC1Y6Poa78mK3yunEmvcNZHYaGrAyGlh5gkrzoCj\nTr9Uib6LdLE+MK9F24TJc2nUzrmaWJL6UzZH1XX39PoW34AIOCGekWfQrekH\nmbYAJHMiVp6KNT0AbJhO79Tp2iHEaEyDWvpEtMKqJQNT7BiAYXGtD3OBn8+n\n1XNDya5R5db6Cxzjr5MZyd+JaAXw+nKdkVBdtXAhS4LFk7QTjRwHi7kRw7JF\ns2DQDKBIjuxI6PQ95XWtuzSntVbC10vtYmdde2FH5zZoQFSBEPsgcsmhlsA/\n2QnQM1L/pSrX+Y0RI6QuDMJNGhTgnV2JHyFQ2gW2nbIb6azdgUMYYMP8MEW5\nja7jzgrkCuY08PTunblyTcy4LcsJxUiS9d/ju49bzyhzRBvPYce43mE4IaCt\nTdKjdRTY1YzTEOimQVszQ+q2z6g+HttiHobCpZeSYDPGhQQw30WxIh5j4adz\npYhq04uoMZKq3IkzFplPi5NlUw8DiJr+QUx+pVXDsx4213FoksWcKQcJZata\nwNA0zP6y/ePmhuKa1Rzgy+WiyB4JqfxjGc3TbZBe10FU60dy7XvAga5JhgEb\nKHiZ\r\n=3VwP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"6.14.14","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.22.4","dependencies":{"@chakra-ui/icon":"1.1.11-next.0","@chakra-ui/hooks":"1.5.5-next.0","@chakra-ui/utils":"1.8.2-next.0","@chakra-ui/react-utils":"1.1.3-next.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.7.2-next.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.7.2-next.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.4.0-next.0_1628197879335_0.7097962430520106","host":"s3://npm-registry-packages"}},"1.4.0":{"name":"@chakra-ui/form-control","version":"1.4.0","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.4.0","maintainers":[{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d97af757279a35bd72cb7a8ec54829a502ad13b6","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.4.0.tgz","fileCount":33,"integrity":"sha512-Hpkrz8fAs/v1mtjoowglV46F4DjZgsXDr86y7cPGWoYsbVRpNQnEPYtYJZVTZMYT/bBV7o5gBbrPR56/+AELlg==","signatures":[{"sig":"MEYCIQC4KKQlXPHd8K6yG5P8lMOj4BimsMAkFsivu8ajl7klVgIhAMsgoMkgm+tSeLYfssb96j/qAyCBDAjT/ivfFYMGa3Ld","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEQMCCRA9TVsSAnZWagAATF8P/RUdgYaIZ6ps5QdGrqHS\nrIbdK+7ZjA3EK/1lUSXT/LY6Pe/bIMF0XQ8gVHjiz09Zoz83iPhIwdO7jOAt\nBVNCEiJeQPZQ0d4jtc6z8w+p/wpnIgfScHScxv0vBDWccYmfFDieGSmSd403\nB+Wi9Qz2adrDBPAtBq4gD3El74D+eQorveCB4Yq4gpcoFpFGa84m0NhMemJH\nLQzTyiTolLWu3xle9qjpCSoLnyXTX83W3wK+zwUkmv5yJBwT4xP6z6K4e1FU\ngURg2/FjyKo853Sdc0oaWBK0oh89patCMSbiw9BHqir9m2TN7Wjw2duk/TtH\nCwpZRMXfsp/GdnNUDr3gLBm9QB4QhPj+jZbCJ9oWKjVVJRRgO5IA6uNIyTJy\ntxmLFMJyXIRxILsrfWh7gSKdaXXwN30HMcUXzvKeHlm1Wt9qxV0bVglx2kC3\nh6MDNoccQoB5X8R6xmpxm4gR3iO+X1Db+xtmkYI1NcxEf2+lyblft7Spds2Y\nuf/uBW0OfxwrCe82mhEIlG6CVNWz6BfAW1gNWkU1iwWTVZHu1xsY9IWE4a8o\nKZXREP9icTB1pScf3alDRWK5xdsvpC3OVryDsyebSG6l5h1vmzFZm4V8nTym\nnqy6EPNGjXFDDaq2fjHqfczyYM4uyUfQRHTZNiXIBka5q0WhUIoPrg/VEqNP\nb8YT\r\n=+WxQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"6.14.14","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.22.4","dependencies":{"@chakra-ui/icon":"1.1.11","@chakra-ui/hooks":"1.5.5","@chakra-ui/utils":"1.8.2","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.7.2"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.4.0_1628504834432_0.05390901791696967","host":"s3://npm-registry-packages"}},"1.4.1":{"name":"@chakra-ui/form-control","version":"1.4.1","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.4.1","maintainers":[{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a69d319ec42d4c5ccb0449513bad72457108dc59","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.4.1.tgz","fileCount":33,"integrity":"sha512-aQUhQiieXdzwr21UvbpNzSUZj420fNq7+nZ7fl/gzsNudWCuw4wVpP/nuGQrGKF7CLxKi8d/ZuDkXMNeabCgpw==","signatures":[{"sig":"MEQCIDC3vkOz8oagCAOkCfzqLqOe0aIKC8vVuDQSpvPV7OI6AiA8einmHuNRJHFtiqGoURGTmSkQ3jJIxT9Zyl3sMttdeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhK3UBCRA9TVsSAnZWagAA3J8QAJuSpbdwoVPR1rUQ7Jhg\nuCtgDVfUEfrUMcBe6003Eu5To2q1qS5QAVKsvp6mQvt1txODG2T/TiLr36Ph\nZ8qHI9bTX/JiA2FcA1EDJGaWfDi5uMuMa1yYrM8mn4pONRsjQRUSUHKXsXTP\ncOuMtHBYNLekZvdZ8gaCmB+7tAdHiIsulcs82byw4cx/b1WR/6r2fFW/159M\nKK/GXdBSzfAORNCaEmJG01KX+mKRxgiVjaceYjdSVS6Bobw4702vPSkYEl8Y\nxHNr0qLKuIk8rYNXRMATxUJASbzxvg+CgeIp9zQWra2Nf0o3n5eRfZgESvIc\nGoaoH9FiNF/p2CPDgdkvacWV/oqiVjmELGoAPauKG4GLACqMnxHvcYA9sX7L\nv0cUI81vSJ6/Nemw0L/gH2X+xnvxzAdz5vyBBA4FwLFaD08NL1SsQTv0wm+c\nVI9ZMWpuZC3d6s9ca864SJYTqoMnqPCkKMaK0miljN4RJGPqThHMA7rhxPuO\nWb0+nWv/SVYJ6JFQqpIOO8idMUNnCuhHSfVNvFqVqlZ9QhboBV731rsG+h5H\nhfJajUw3DPngjAebS3hN7x3LmcwgmJ36eQgFkObzNHDaGjhxlV0an7aF4HIU\nn7OALDjd/rqDeiXWwJXM3Hp+HfGwBqt70CZxLp2CcTPUa+7gzv3vY5PSgsfk\n+TSH\r\n=fTk1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"6.14.14","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.22.5","dependencies":{"@chakra-ui/icon":"1.1.11","@chakra-ui/hooks":"1.6.0","@chakra-ui/utils":"1.8.2","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.7.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.4.1_1630237953750_0.6754139535661454","host":"s3://npm-registry-packages"}},"1.4.2":{"name":"@chakra-ui/form-control","version":"1.4.2","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.4.2","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"24bfb549d504afdc4600a2d828ce5937600bbe04","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.4.2.tgz","fileCount":33,"integrity":"sha512-VmoyNAh+bWj4p1ocMZDfrdJgo6pG+cgfJZ62YBSWZk7glK5ZsUNFZfd/TlxKkINKzDQyhBEEPzNjNV9TcVymmA==","signatures":[{"sig":"MEQCIFEFJmqhLn3zE5iJ3Z4fp1AxE8p6fYRGXA3yKBUypmgLAiBWBS7KushXRZZfjHOh3dL4UUNJiIF3DDeARG2Mz4ymHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123972},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"6.14.15","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"@chakra-ui/icon":"1.1.12","@chakra-ui/hooks":"1.6.1","@chakra-ui/utils":"1.8.3","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.7.4"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.4.2_1634254418967_0.22985913275122227","host":"s3://npm-registry-packages"}},"1.4.3":{"name":"@chakra-ui/form-control","version":"1.4.3","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.4.3","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a266dda19932604d59b41689bdaa0c8755e4e435","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.4.3.tgz","fileCount":33,"integrity":"sha512-uHulh477WgB5YYoamcNdQpH6/p+Gf2Nk1sC6YzqhG6brJAoXWRxa5oazgpUt0U/AAlA+W1rMTciUKidGxM4Hbw==","signatures":[{"sig":"MEQCIEK7TY9cBoyxtNnA6Lg/uPUktE6Es7LV6Hx3UkiQXzZzAiAS3YZJKgN95+e2/PNOOxeUQOBGjnywdFM6kl08egIhKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124318},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"6.14.15","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"@chakra-ui/icon":"1.1.13","@chakra-ui/hooks":"1.6.2","@chakra-ui/utils":"1.8.4","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.7.6"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.4.3_1635971578030_0.4693689117443487","host":"s3://npm-registry-packages"}},"1.5.0":{"name":"@chakra-ui/form-control","version":"1.5.0","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.5.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8524d8d380c86c876183fb54ee34aa94ec5d1af7","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.0.tgz","fileCount":13,"integrity":"sha512-fdBVGRu+M7wibJUk2aii/vBuKu3zlyoj3xQ2fYnA5w8a1dM7GlVuPEBvIDQMrsSnd2np0jTXS8pzyy9KqdoLGQ==","signatures":[{"sig":"MEYCIQDnXPGf4M54fHz2Mbk70KNxrqjjmFnMTW1cxX9I8T2AygIhANZQvXDrJRHheV/bsqrU9yUDZBvGaUavpIeZDQ2mYeEC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66572},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"6.14.15","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"@chakra-ui/icon":"1.2.0","@chakra-ui/hooks":"1.7.0","@chakra-ui/utils":"1.9.0","@chakra-ui/react-utils":"1.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.8.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.5.0_1636649802625_0.7113992580992907","host":"s3://npm-registry-packages"}},"1.5.1":{"name":"@chakra-ui/form-control","version":"1.5.1","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.5.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"235267088026690d6994fa406c9f2618fa0351ec","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.1.tgz","fileCount":23,"integrity":"sha512-ASZYQFOs5mAoaNXAN/ZaesMy3XV07F0/Eba5PQ7Dejdn91aep6lqF889hmr8yqcR646xCOY7ISyYsskfh9QHrQ==","signatures":[{"sig":"MEUCIEg4OMrDpUapR67BTNeydyHObfQnw/BNP9d7j/xLgtGaAiEAixeBUd+yYujWOrnIgXXxJaK1X7rZ8/dnrZXjk3vzyjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95327},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"6.14.15","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"@chakra-ui/icon":"1.2.1","@chakra-ui/hooks":"1.7.1","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.8.1"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.5.1_1636746689178_0.16155614754396552","host":"s3://npm-registry-packages"}},"0.0.0-canary-2021118154929":{"name":"@chakra-ui/form-control","version":"0.0.0-canary-2021118154929","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-canary-2021118154929","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"774c7a01121653f76425d7c57d9698a042dbd7ee","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-canary-2021118154929.tgz","fileCount":22,"integrity":"sha512-bZAvt0qunV0vaz2TSN7HM2kwtubCJ/PwBCh/b6vijuUFnmFkDxXflbE9EvKG+zkvYvHG1lj+f2jWlIrgfrDytQ==","signatures":[{"sig":"MEUCIQCNnxEX7vHfgseMcvtxLAn7oiCDGIm5gowfj3L2QZXEdQIgJt0DfWEzAksocxxrx+97PKw7ayBE5nQS3T25JRXAGQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsNQwCRA9TVsSAnZWagAA6L8P+QEIDpeCmcuuXuQwDvJ9\nRQBxU4rnEAmgmJy+zF298Bth2B0CL8z8F6ixzXIajd3FM0i8I8hBaWlW+lX9\nmoSXKjY9s/hvHLzT4Pw6iHpzuEmGdkND9yG0/XWT2dUTlklMP9uBYw+3vz1a\nPbKxD0uwM5FKQhUmIH6Kq53d4UG0WdiT9VkIYlF6sux/DqXmyGxzWDen3frL\nyKmcWgPmGGca4wWpbuc19rH87LP5vsHBwUQCfNLvFIA+wDyiYY3YkGGxO/MQ\nl5/zHevovJSPdntuPiOXsDN6x56M8ilkDTJyYvfv5Rk5Hl5h154sDEANvjwk\nO5keAHDPxrU5eoFa2IvJrd87ZkXah5Vnx+Qf8SgUQHc1TRu5zxTiM9PaD/ck\n+gN7ujov3uvK6sBDt3gbaX5ShZ+JnLShmxFVtgPefr3mPY0iU437UYHvPQQH\ntlqFPcf/dOs9qJaUGGXiOvdFjkWf/e8Ie7CM1ijCl38kdyCtIOFO8P0B5owM\nyOFGOJ5mXWO3vDGXlSdcQckAnE2XNP8NsQ/TmkqPHQl4w8BAFsU0xmumPYSp\nfOZ6G1G9ny5oo+OZMT2BntWfxURAcL4i0glyNkscc1zw+Fxst9WeukAS4gfW\nLcTn1QuMYloAuocMK146O1JX9eY6CFW6cwBqeXVpYonDe6py75UY4QaJRaRF\nEI2x\r\n=rZDM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"75e26734137b20dfd350785999d3fd34dcf43011","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/icon":"0.0.0-canary-2021118154929","@chakra-ui/hooks":"1.7.1","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-canary-2021118154929"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-canary-2021118154929"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-canary-2021118154929_1638978608104_0.728144794840589","host":"s3://npm-registry-packages"}},"0.0.0-canary-2021118164051":{"name":"@chakra-ui/form-control","version":"0.0.0-canary-2021118164051","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-canary-2021118164051","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2f9b989814cecc24dcc15212f8adcbeb69d38f03","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-canary-2021118164051.tgz","fileCount":22,"integrity":"sha512-irsAjupO8yJvfNn9RB4NiZwnw51+7EZVwDCdGDm4c6mbv5MX/7fYc3XQTB/pxbjapbhjgcdBwrSZDlNI+TbYuQ==","signatures":[{"sig":"MEUCIQDdZqQfGDKiLYZsZOrapnfsh1zed9adkMuRDHQhQ9zChQIgQ3tNh+Lw5MfF8TG00MRVNc3sxfGUMWe12fVoopzA29o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsOA6CRA9TVsSAnZWagAA1Z4P/jkepJw3HzXniKnr5ckV\niwhIsWI4xAaUnVB/YTfEXuSZZM6jYZY1+2aT1KZKGata99E/7eQa1G6R+HsK\ng8la7F3RakZ8AdMb6MjCDxXk4zcLZ0foP2CRalUp4W94HJeqtcBTL8RZFbA2\nJJh1Zh8uIFxBCIrofDHPkHNigoLNRrb4Rc9ouEKs6Rtb0hxFf9ZS6M5avvf0\n5Dybec8UJ9e/ngG9FHokMENm9VbRvO3mrvBnoesA9TZ9682k9lpnwKPJGMED\n5NYAl2DQYuWuZsHJ0JOhYiVSCiA+oce/xH9Je1h5g+Jzd05MYro91PSr4Vrs\nxMMhjlVEkZZL1ZnHoSVDLjXtQ1LYZqPlYTxvEvVMLZb3MJzF0Qd+rJS/hYoi\n706QRs8aUln4kl+Z9mnY7yKF0zIA7f5O2es4t+251k/AMsmcDFKb9Q+CXjkH\njleWbGO7t/HvOy5g1epJtboKLR6IWV9MOiWew2MZKYAvoDa+CLVfXXAIDopw\nOlys/S6sRp5okvfJi6Nrm9EQllYgH3qYdy9nnmhZtCFRyfrnG9hN7oM7yjVn\n+Y8yZE7rnNn4PmBDvmuAc67DZpepU6HQyZvdd3+umRMAayrRxXvM5tIQnPfr\nLyL4u6K7gfuvr+TN/S85undI0kW0C5hEBMQhZqVR9p8uBYatUdu9P71lbJg1\nazB+\r\n=ciEW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"3a6f4a7ab1dae9e667c49a3441edfa8282deb094","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/icon":"0.0.0-canary-2021118164051","@chakra-ui/hooks":"1.7.1","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-canary-2021118164051"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-canary-2021118164051"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-canary-2021118164051_1638981690196_0.607654221099071","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211191288":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211191288","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211191288","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c64c407d3e16eacc1e028c30cec1e4992ed9462a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211191288.tgz","fileCount":22,"integrity":"sha512-P5+0aUGFc/Fxu4uzYYCi0x4RiIKpKTxMjY2c7M5ORhxND5mzn+pqfW04Pm4mkiFM9z1HM7WJyDs483Fy9tuACg==","signatures":[{"sig":"MEQCIE+K4WGdxxwh/p3sTjZdhHF8iNbBR+nF9ggYraWT9q2YAiBrl5rKA6xNLQg0IHp6n/gUEop7avmzAEnp7cf0ZoZtuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsfHDCRA9TVsSAnZWagAAuWgP/AwDtyS6+rQCr7jSrewd\nf+qOhqb6qXVNV3zwp5IjFDExJ6NtTAWjoarWBsw+D92laI+Hd/N6KnH25Yxj\nD28fkdgXrCcApiB5CpbncQqjEZADWEif1cpT6OewBRoSRurKCTSNJL1BQw3e\nck4h8KruvMphAKbtMx4B2wMXVw86caLSQZs+fj2tXTUYN7K996wlJYJxuj0H\nTTqB36K4fNvn20kih2oPeolG25csp/RQsPcy7FP1lmGMksAV6EWXz2qWCh0P\nmxIzVtJZHhqupFH84hqfervEOpRi8EBEAqNuJLfVMx48CO0SlOVcPD34BITH\npxekPl6dk8E3JszM8YRUeypW961S2s+uXR9PnAEdmjwF1nJjhs75okXxFkhh\ngsO7pNbb0E4cWnnYNHOEer9Q2Vdk04jFhi0h/kim/iBoNPsFjQakdsBZx13I\nBZotc8YVmAle5fcZmVgwImW0p1i+eOeh76uMjDj9M9gGpyBnOr+HoGoM0Vu1\n1C0vwcjktYVN5EPol9zbgV/s4R54XlGP2MW+gWuiqASDkvJdnUN98a6LHukD\nNiQfEXqWUrxf1+u7R9cLBM8e+Tni28tWTUw3fwfA1ja9vPY9z1sGweuYf47+\nG/k5f+c6Zr2hKOIIeIlHeh+LdE2bnwKnG1/4cgBAi5d2maCmM21CRYuA0jO9\nWFBU\r\n=6CVa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"c7ae55690b66f09cf60a289647dbc49c000ef21a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211191288","@chakra-ui/hooks":"1.7.1","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211191288"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211191288"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211191288_1639051715019_0.7387685116099856","host":"s3://npm-registry-packages"}},"1.5.2":{"name":"@chakra-ui/form-control","version":"1.5.2","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.5.2","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4ce34f03165cfafacecabdce3be82011b74308a7","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.2.tgz","fileCount":22,"integrity":"sha512-uWv0/f+JEM0ZE5Hnj3TzCnJ09EB+A+DSs9QgyECOuxx9Ju6gnns2uaRki2BfxksQL9ZZomPCkMtXazY9Wa81ag==","signatures":[{"sig":"MEUCIQCE/VjUONRiuhh/B+W8F0yBIIe3NH8qYCW7z0N5muvzHAIgY/kOYlXJn3Qbg4SKOjTcMtqZbSKbMgMkva9MGHQ7xfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsgTdCRA9TVsSAnZWagAApcUP+wUpeniT5dupcq5Jin9O\n5ZrpxnRc7GomutZmvzuWF43Xu9I5/ey/gHYnibVPBKowUosjwaOF2L0p+MiY\nWfhVJGWEhGd+3KW2wfMmLZNE+5Mj3pNwuz12G2LNgOWRolfs76Az/7AOx4a1\n5njCjwb9BCMFwnkER+or/AFYGTZFn3D/RsVOelbVBwB+1iWCxsZLBRCOsRGV\n8Jj8ySMk6Cq7Qz0Oq1vOsbmKkU/mDH9CegJmObiKkjIf2II5LBiQOtN6O1DT\nygAgNHkptLN+baeHNmE12BERvxutb1ah2cshwx/PI8GRiTjXz7+c0AqNUZxK\nVs5BlxsRfE4fUDYUQrp+Y5kAHVtJ8sdUiRwQ/Fn5EVthazDzMmQjZI3e8P6V\nDu1KAXQ+Yw3zCxoBT6uJ+/52nTIgNjA4kML/0xTSYa1xpqmo2mx+MQ3dMQqJ\nR2YImfpjj8tGSgL+b6faoH1WbW2uqnfMAfVZ6Zmt/zou0WsALMBVSHMCmRHf\nMoccReQOqo8L7I/6U9g7TMKjzR1kV4j7QNlFS/vDpPGtB/ty/vcbVIkF9UM3\nnkaE9dcMIAAJYAkUFciLEapfCPWECbWh5xEJP/H2sJLIOQG2MefJsTPQYC79\nQgxFU5TVMd35hHG/RTgbb0vuYyfEps/83+10vbXeJSlcyvQ7hFTWa3L0cUtn\n1pry\r\n=8k9S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"5aa302a018a724ebc96f396fd81e95713969d4de","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/icon":"2.0.0","@chakra-ui/hooks":"1.7.1","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.8.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.5.2_1639056605401_0.43408931285563535","host":"s3://npm-registry-packages"}},"0.0.0-pr-202111921327":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202111921327","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202111921327","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"086c130a0b92b2deed2da5a297b4e0bd62bb23c2","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202111921327.tgz","fileCount":22,"integrity":"sha512-s5mtmwqibEgMHfq6Sazi6Lij1UE67DHPe+qG+xlZj2iXwZrm60usmYqx23yZI9YbvIeYpIpCmblWvW1un2zJ8g==","signatures":[{"sig":"MEQCIBahvZTgL7cHqkNNv8fb799++LsY9HJbYVeyi0lDH/EIAiBjKN4LHqRTe8nmhxGX+JhuiDZ5Mi15xlFVjsUN039w1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsm83CRA9TVsSAnZWagAACfEP/jmNI/yaJYyvFk43IiLb\nJbaJNopJdZh05tA7iTjw+KtZDKrxx+X+7/s08z9UE/aZohg1vCABXxOKzZ3k\nhdFai8SEcaFsT4VSz59Z3qVuGQ6taS+t8nzkwCrOdfPsu3JAec6j/1W/463w\nMm8e9IwjXeOgVDQO31yT/lIYOAIvnIjL2iIJqbdCfmobN+ZQXpYyjmcVHLER\nIAoEqTv0pJ9YcnOtqMB5+l9TVKia6YhjfT9dBl2WQD0gVLjfrLx9HeX1BmWF\n6KfPlOze/JHwGbqfMncM3WmmeWdLydmKVQN+o099f9ZUBTXtOHjc45dDPjEt\nuXYrio1PorPCow9ADwbmxE6MgruwIjDdzWRdJQnFCHQkiS0sG8TlyrJwvLCA\nXVOYiqV2KA9kN4kylkpnSXuloTME0d19ZW3VU68f1IEoz5we6ubqzLEI3kgT\n5glalcHdrm13BPHFrdhuy2415CfrkC/C0aatt1fwNNHsTzmAF6u2f2vtZU+u\nYbQfBPZRHhYvdUa3MgKP/hXjux/kCUvNU8PnjC9EUFWtBYd6NhOXGe90tBug\nOb/9b46ktG7S+vbDrKWTH3ZxGG59uJxKxs+T0xovrtomVTSC4mZiMwogTEYj\nv4PaXKVJedBJE2RiX8XBpMEKCJAUz7MLhi+nxklglNJEKyd/mcHBhysB13Rb\nxpgd\r\n=WtV3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"ef9738bf9a9871141527adf7bdaa944f50b105e5","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202111921327","@chakra-ui/hooks":"1.7.1","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202111921327"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202111921327"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202111921327_1639083830864_0.6425848993518157","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211113195848":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211113195848","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211113195848","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"965769ec6afc7a9d66b856e12c51823c07e9251e","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211113195848.tgz","fileCount":22,"integrity":"sha512-F8VWVnVtvObbpKZzvtJzKb+pO+m/jpBEuZ9V9AgRa66hrPRmilyRMkoOvGVrxPYLWt9Ea2NHw1NkWA3VnAbnVA==","signatures":[{"sig":"MEYCIQC2GRXISAU4mFNeTAobaL0/dNmhSAiGjTKhnAeAq6WluAIhAMMtNUCrYZw0+0jpYBI+Dkafq2e9QP1leHHWURIM7UGk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6YLCRA9TVsSAnZWagAAN8gP/0W41zVzRJBK0/I0wlOC\nyWy/C24U3I+PChhdayrc5NBxH3iV/C6lDPWSCQ2XvnW0ocd6Wl2KTwN31w3C\nuYoXWAyvS5rTK68ZSQLIN71J4l4sqGz7u5SKCY+9VxEcO3+0N6i8/VBePnFO\nw+FNQDk4+1cNvCo+SrDd3GNj0zwrg+VmhB6k0JKmkwhfp+zLKo0TJ4RFwTki\nqLdA6Uq4IGxgpcfj6o9wj1yitnL3ODPxtzVjsmW8lKJt+0tMl8G4oa1ZUorT\nTk98dYFxxfTg0NNSo38owgKEIN7ukCTyMIfVyoNv1p5Ticl7dJ5p8wVBUNbv\n3i+g0G4/AO8BUlnPsv+zIOKqmHggYDXpRdP+2vCODyxPZenOnWy8qn6uFP4L\neCFAZvABBuY7Oh4hLw6nQWBPw3fD11jtfqnWjBA7gv9LKCJK2tIGS3BMQho9\nsW24lbvgcvdfpGIvDq4Iwgxf1EU/OEl7U7BcZsJfdRmYUNWQh678+VSao2OO\nPOVYH4EiMU2CjAnmGpBltuDIGIVGYfz+Yd2cqnobaXIvUChy0wJ42N8o1NGu\nFbrR6l71b0O0CwmaX6sMQPlG82XE3Q4HbxMMRsVWKFYHIo57Mf+xR7Xwnys/\nRYOrUZzt4IuLs22mINxChr/Cv9my/P/MH64m9Il+PDN9xjU+QrEOSa5MSxXb\nnOTt\r\n=/Rs2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"720158df0e7984b4e09421f4ef22d8bc5017921d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211113195848","@chakra-ui/hooks":"1.7.1","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211113195848"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211113195848"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211113195848_1639425547410_0.801438558057163","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021111320052":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2021111320052","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2021111320052","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"71721470962fab0a7605783b3f16d763bd660489","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2021111320052.tgz","fileCount":22,"integrity":"sha512-EEXs6Ly97AOmeZIta9CkV7Tkli+NrinN65tMYLhqQ54XKYSr4BgSAmUb1b3LTQI27nIADpK1Ke8BkMr1zBTJGw==","signatures":[{"sig":"MEQCIAGxlnS7ljQUpDWBymV9kZN+jzamRTZbX6eh2Nk1txLnAiBRJKGs592wtqZGCldh+phstytfS3f1XFumlCgLhEz4Sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6aHCRA9TVsSAnZWagAADy0P/ivf0beuBnlE21TMLcFC\nrJQH/YbkqaPmscrAVqUUugmbs5PphUqlG1TN6k1i7j10gKkmzzkz7sPpoOq0\nKwsjhc8W7ABlqWhoyGSurWU4vjMTzsMHCBOv/D62p9EoHdhYCv0EbW3TOVsd\nzeiRUZjNO/j5hcJrbJsr8DDwZAKk2cUXgbBTZEcWI8fR5Ff9gxhLbrfsxucd\nxk4TfCvIT35kd0J9hwVcKrjUKYM6EZCP0ec0o9PddSVZsYV9zCVNuz7IGTqo\nBTTx1W2jIOuw/oFMnXFTezv7GKfE69BPDTu/c2sLfxJFl7fHC2umQTBCzV6D\nihux7EsXVdvCAs5M2/4xQoWfDFevubCQDzTlFndHJo1DJyEChoooGUjk+srP\nQY64dU2Yd9qHgR3eOWK0n0XSrOuWepkzU4NcXnyq2J3DxpjRJS8Cmnn/vAwW\n/Ll/lk622WBmMCoiL6gDOxyUKa5IudE2p+wtAghmacfgltrnYtz+i2/uFXmR\nSjEzfdXHt57qhzVHJ33keTOtU8NTthnPtWUsGYcmu+T8J1cHUp7943qSFGp2\nMxfIWWh3WQzHooKHxHe0LXV2ccpME89vkyc0jMxh8IjlvIwLhCGGh1dREDRG\nBQJXWrZCroYZwDzTqsuCOfnwo9AWH9uKjFQpmlA7aRGfBqirpYA+W4aaqo43\nQ3Z5\r\n=iVzL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"3f403d40620547c166c60c2d3dc455c6114f7928","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2021111320052","@chakra-ui/hooks":"1.7.1","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2021111320052"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2021111320052"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2021111320052_1639425671788_0.2066437080928918","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021111320117":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2021111320117","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2021111320117","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ed38dd4cf6a4efc1dfe9a740fc66c56a4666bce8","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2021111320117.tgz","fileCount":22,"integrity":"sha512-M+IfJy8P3zW+lH11yqC6wYZvdEkeIgzRjdrHKXfQKZFdLawfBxrKveApKavly02MPna7uBNxbisw6C8F3GiytQ==","signatures":[{"sig":"MEQCIClv7AgjEfj4QkRcRoNtYgJp0eAowvo4BbZS4mfKsNWZAiAggM/TCLr78GC4ZCmNfg4KBpcxyMUvfBa2W7/E6HAUdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6juCRA9TVsSAnZWagAAMWsP+QHBAAaTKVrertut8nY4\nnWZHnr0fpWCJcDsr3m7r3y0rU3mqSw1BYxg3ECjZ58er+nSwp7DwYoi0lTFu\nZwDhJ9dnovKZ/lPtJUPeJbwO1WEp3OUf8JBkEHwCPYldwrWdMuAtoiVztBW4\n3aV+tLCFodZCbeNmlvAFIrtIIvJDDYvwdjy5N4+D1Wn/fhrIYYdd0nRWzbcV\n+tfEEclDFESrAHFqNCZ1Qr6+IG0JKmfoCNtJgzlVA0qqIdRsN1Gz2Xe4hdDb\n6whlJ6/d+W+h62xxxPdj5fSTeA1PntCgrV5MOkT/re8R4ErBRsHuuJMH+K/r\n/Nbi18fnJUW0RFA4cE988zhR49DRBFFaOErAh0vPds7mmCai/Ij7PV0At/th\neEN1Nn8D+P7EtGMjtJFMJ60RCKXzPs7TmHUO0+j3cSuIJRTwp1OE9Vqpd3jA\nxKzgIF2CTa2VkSKnJwsTba4QJSm9H9EDLgUFbyD5FIOmzT21QoR9ga/T87+K\nfn4jyTx9do0PB3qF8bUwYeIzJlYN4HAOT8+xDAbTJ6OhAbxUr7H+FLxCLgqV\nuTmXU5vWYT85cB+X3yYxaHLgSVRcfAAQ4PZDyYrPR76rJNJDz0uRxk73p0rm\n4m9huw7tyIDs7EQnIif8ks1dLbG20GNBdFPo6wbB8U2epBElVL8+lXqQ8wDd\nigRn\r\n=ZSWx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"3f403d40620547c166c60c2d3dc455c6114f7928","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2021111320117","@chakra-ui/hooks":"1.7.1","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2021111320117"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2021111320117"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2021111320117_1639426286277_0.3529017133879355","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211113201444":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211113201444","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211113201444","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9799ba69b68dc97f8db1ffa57eba951cc104b6ad","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211113201444.tgz","fileCount":22,"integrity":"sha512-EGJWjc6YZBgcX+198i/D/cg2FtyBVAy9BoAUEbzFwkBLNNzxDG5QQ0QAv8MHVpfZujHEwT1cK0+eUO26ivpI6w==","signatures":[{"sig":"MEUCIDlrDGggcYOmHSBbmhx8EYtHiwCOj+y54Ea555SWsezZAiEAw9THS8YRXpsgFgqRZ7U7OlOnoVU8e2XJHJG10c9m5m8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6nICRA9TVsSAnZWagAA2q4P/jSG9pB86Dh2tgU2i+by\n6CJZrCIslBBnHV3G+89YLLGYmpxLEFbsyEpDGEFX7u5zow2kv8QBtIsdiGus\ntLDelUbWtUrsYm+pjIhekjhjWU1tjacl1ln7SSA+Vp24+Jgj9zEwvwx5Z4YN\nP0nlMumhVueIPOEwop4Ry9jI57xqm71estgWHbjCBmnOLvJNjfBqj470Jb2Y\n27y0UKXuFymVkCV//5tC+JQgC9Lvj6CM4xxLbg8OAVD3NLdockO6mXUjFopX\n/PUwwE+37NNCS11u7k9ZuU/ltuQ8IRl16Ev6vpsdSuYgRQO054QJZ/1nOWkx\nmkk0g9Rdgty41IGSiG/fjFMpbHACtcIDIGgBFxLtUDkvYtjLyATGEh/pEaNe\nBU+355KOcFu94z7GlqLifEg3gcsxV0CNaox9TvCfazNU5O3XZnZt9kn2j3H4\nHefPv3hPQW+NuCSP97K5ggV4ZHwIcaW5GJ71zqEjirjsBPrHkoRrSPkEQZUl\nvoCpGacx8QypCcsOZQs1wbjMcU745dqM6FRmCK7y/Y0joyfeZW7fKQDdOITY\nuTyD8qdjRDcs+ykZKew43K1vrp7PWUhx1QJjPG+9wNljhDMHz40Rtnd4suld\n4Cw7EfOzIQunxxjHsUYI1G95kEzIjAH00dRMtIpkj2vvyym7ZDQtQYxbqn1i\nehbZ\r\n=17Z2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e2aeac4db4bb3d92a4064493e9878c8414de8b2a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211113201444","@chakra-ui/hooks":"1.7.1","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211113201444"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211113201444"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211113201444_1639426504229_0.07448993880118682","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211113202333":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211113202333","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211113202333","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"35d5c8501416746a29fec5e40b9458b8a74301bb","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211113202333.tgz","fileCount":22,"integrity":"sha512-Tk5pthEy1SCFplvz0pagf/7nrWnSzDnYMPDLeUB57XP6p/dPAiUskYanxG81eTy9ftvXIVhdaH+zmBC60p3/tA==","signatures":[{"sig":"MEYCIQCqzJDfaR/9frdB7JVwG4FLKIHdzYvKdonMkXFvcy+NKgIhAP4QLYU4eIYRrsLkwo8uBSm6Somgm7HZLBfswg6dPPf3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6vYCRA9TVsSAnZWagAAQbQP/jBunhtt4fz7IuPE/xSp\nYJezutjtEQS4YzJOgfgMMrW/RzvQEklNDoG2lgEMpAfi/XGTiy3Apx5kX3aX\nkISstgYjh98wTVLyS+BFLNUPd6LugIEhWRJpjYm++o2+ooObwqYnh6+nlug6\nhD9SyQ9Mq3e9BTaYsanY9drBoaBn1vcjmKrnFSlBvvfK+vX/o4I5dRaAsfbw\nJ09qAiX+UtxJ8J3+jCJJI1f9jwhm6bQNTjuWwlUUBT9yheHC04hHnD1rLEZE\nDl8we6JmMu6kZk9y4zVqLznQyy7YqLM60XLPXAJ3ZwzwXwAOHgxpiHmua8Fh\njWfGKnBMhLz7tlKuY1ZNaH9cZsObo4Nqa38nn9ir60Xq0SpLP7hYO1XXp726\ndbCQDPifEfIyvJrg2cfb7I+TkeY7kIIOlfX8Ch+RKkHce6XSlDVPbVbG94p4\nEgiPag52Mm7HNxADO5+jUlVAmPR/rRD5l08hgS28fblVpBHZEFLC76lquJVi\ncsT0hF9Q8IaGfaD1PDochXCIuwWTL1x240A5Z+Z55PUApbYFMHkRTgTWxg/C\nWxF1daSmvS8Vo5TVf9SIpLeJjlwX1mpL+i01z8/E4HG9U/WAm8Sh/DwbMx7K\nuntzPJUcCAfaVKRfVfKzyUHPHeTWhnLbKd0aoGURCJWC0VJH+PiZyh9Ufebl\nTiVE\r\n=dCPa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e2aeac4db4bb3d92a4064493e9878c8414de8b2a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211113202333","@chakra-ui/hooks":"1.7.1","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211113202333"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211113202333"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211113202333_1639427032411_0.20715579828323905","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211115102948":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20211115102948","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20211115102948","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"69b332a7c16edae7c65f0058ad03a9f1e2de64d7","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20211115102948.tgz","fileCount":22,"integrity":"sha512-DgvcSbj/+Ut2pJyKMhbHXkzO93Zfbf7FJMYRMwQxk30GyJ7vZU8qc7JJJYZ+Bws7zSCzqTd2bshBSQpKr5RMug==","signatures":[{"sig":"MEUCIF0HhCddtFyMEHBOCfUPAjfGvQ1U1JAxCdTMJ7IsD1MfAiEA3nGtPrioldK5Gvb3gutIYV4Bblf4BviTY6UW60h4A54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhucO1CRA9TVsSAnZWagAAU7UP/A4GTgTlG0HmiRPoVK0j\nCLUTPJh1rXOPFIhVUkBsi9zrYDHiDH5TKGF27UWhsJWSA2OcLpbnyNelZ763\nqrpmF36xI2k41Gx9FvrVM9JpwwffLQo2iW6dTT7m4U5SsqzGhuyqE9oaTUEY\nmT01RG7Ly01QIet2yjj79RXYf8R/sTkB63KTDEibyycGGgRT1R1R8WsJcKx9\n2rkxcwZ+NDajetoltJ++Ss/wr3rQk+cDBeGMpE83qyEdc+vNcNXvhP3WxUqc\nCbFQ38HlrY7h2UilfZGBupPFj896TCNRCXdEqCkgfuNEubFKLUXqi+L49GZK\nI8WaWCM0loFj9S7rOBSL0E5R+X41GKTVg7kLKxMb9sn/EVCqo7Nxd8SxRhv4\nvYmzjXGqy2R0mQ6oUPy4gsdVhJBOAwi0v8qJJqJ2/kRzjGsxEx9cnMQmeSrS\nc1SAaWw28/DC6HJkaHSvP3Um0DdxajPOHfnhfve3ECPWLbYiZIWxMQQ1dkea\nrcfRM+7mIKcm/Ja0DzBsqZXWVCMZOwf09a5dUtjE+SsnV1ARkHV1ZG2UT+d2\nkFt7n7lhYQSsSgRxZSxBLkRXFw1YjVd09gZ5n6qRrmuWy3BPIwbxPErKgB3h\nvKFFKKuH6Ub0wNhnGlUQ3hi/7XitjTm+duxtu9gT2q6ozeXKPn2LOvmF7WOm\nyCkf\r\n=WQeP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"57f10d884206eee208121c6784633ad27310296d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20211115102948","@chakra-ui/hooks":"0.0.0-dev-20211115102948","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20211115102948"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20211115102948"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20211115102948_1639564213038_0.6961592349127947","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211115103018":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20211115103018","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20211115103018","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e340b01ff5b3cd56c3f99a7b67269638526bd11a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20211115103018.tgz","fileCount":22,"integrity":"sha512-LePAblNGJDmQ3zMfnkw4IB20G152DpqLx+ThBug6gmrz2RXQ3uLrxkJ1LpwaxrSsMcI8l7HAmGvDGciiRLojVA==","signatures":[{"sig":"MEQCIGRMBNep2bcl5ePhUKrATQY3od4X4mXVCV03lWD/ACgXAiAi1ysbcCU7ZdMllY4ozdTTx6ycPzgyhc2R7RNuhEymBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhucPTCRA9TVsSAnZWagAAGr8QAJ8R/BYHa1cLZpBMjKAv\nw19N01PA3Fn5ySQe75jiyu4n/NqS0sCF7YCltpc1OoKg1KRngEMb5HltewRa\ngTaVYfxDSyJAtGLrSr+JV8Jc+I1sN2alJYZPWdDRNnyRTR3/R/9x0fb1lQ2V\nCwNX3tg+RKRoi0CIx8QaSvpBKM8LeadbMN/l1yx5Wge9RtP7d5EHXvFdZRTw\n7a3Os8R/mUFJ5Jg/+jPT8p46u7AWzH2/qTLVG+zTVXYGBGseygMxCnhTVW6D\nHHi1cOI8/YqEChljA4er3tfjrg9lJwbfozlilfBSo/+TPUG9efAuWhPdxN9C\nHlBVlYDFgneSSajiD1gkiZaR+tzg63srSYTdupHvZ8uJPFpWz0WGWfUMsW90\nCssq+HpCFPoFzO2dwRhHvhF1A9msdb0jmrJAJ8UKI4vjTjLgjUDBwAm+imaO\nRj97t18nQ6Q7aOsuwqIT7z05Bfk/jw79rfvjAz9P8F0ZjV2YXwkOjF7fS2ah\nfQgw9TO6ELLD4CgT/iqk8rEsSw4Zbo3QgLWbDOBO5/Jo/sR5Z7r1x4Iq01gS\nC15c7tLnDdr6jGAr7c4ftDbHzGTUyAIOnkqeKzxDDNmXhetvv0esrOgrf8eP\n9gAlVhu7Im+3ibTQbfwW+9BqlTyF6vcDBcf0X49mmhyBpqdmu4g5nE3w/2qm\nfsL9\r\n=Ia8F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"2bc045a671b23b5d3436d9038dfce4c7f75bbea0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20211115103018","@chakra-ui/hooks":"0.0.0-dev-20211115103018","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20211115103018"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20211115103018"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20211115103018_1639564243884_0.9731214106670265","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211115103050":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211115103050","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211115103050","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0192ce80c5f420ee13c5ea6141817b2939292cf7","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211115103050.tgz","fileCount":22,"integrity":"sha512-ON1WTmma/x6K2qS5KNym5czoT9ift17TWRe0JRBLMVQKxYdAMe2g0yrpQQr6s6l5GXT7AvI2jqx+jd86E0LlCw==","signatures":[{"sig":"MEUCIBAeS5ac2cMbvb2VQPrSJJa4juvEyXntifP1I8OkEJ2GAiEAgHoIjB9skp7as9ytK/ICBk0mRRXYuMBbQL74d5ea1fY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhucP6CRA9TVsSAnZWagAAaF0P/0BndMayuevRU1EkODzJ\n33f60jLZXcRsm8ptzWSta6OxsTPslU9ZAWMiJCxHjfcFcNWvLWgMM82soLti\nXYa2tIlKTlQgn43iJK5rcqY6EsvYwFka0KcKGfJbYDE6dPgEKQMSUS/Luya1\nDAf639QO15Vg3EUWAlbMiCE8U5jJLTjFepN4ZuAfTMdJ/ulXJwdmi4W2xuOD\nTKp2YK+AtZa99x4NF5nYqnGbY11u3bYL/4XPPZavtFtddxT3W+Pv3B7gJmPx\nRth0r1x1A7oGt5MZwbyVKSAh1nVTkFaxwKWSn0qi/miJcwTgnnWdCnX8mxlG\nXtwyvHvoqG8ju5fwUeashvllG71EFnvbm4TZm3mwSvK/JOpnIpX2VLmT1bhD\n3h/4hdxrB7cgvw5cBRMfE8WjtpUSmEm0TY3daWwgM3gPM4HG1W4TOX9n2q1w\nBQOLuukfiD0o5iWS9EZqMPZYOAFZYpL27NvMKjm9mqcmJ1e8tyzy7LvhCery\nhMeLajeuUCbd9MZO0pjMKHoFIYMzT00WD8tFhrpyzQjRHWAhfeju2G76WUJL\nCiMTGiWW3xzV9U27CKDLlub1/VJu2ouZ82df4hgH9Ih1R4nB8jYBxmUdo7LH\nbPxY9q322FkKt2U6bbbBLUStJStIk1Nj997TyM67TEw4Hz4jnTeqMmjYFQbx\nqnnD\r\n=v4Vx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"2bc045a671b23b5d3436d9038dfce4c7f75bbea0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211115103050","@chakra-ui/hooks":"0.0.0-pr-20211115103050","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211115103050"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211115103050"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211115103050_1639564282243_0.3396495756535447","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211115103321":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20211115103321","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20211115103321","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"06212d1aa5bdd4ce451884dae1a61d4f6dd219e1","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20211115103321.tgz","fileCount":22,"integrity":"sha512-hf3iNj6c85jw5AkSQSGAkCsgYwZ+N8Q60r5hMdpRIlGGnkTV22BPPknVZzFfY3QAZTNF5lAAbZH6wDMN3Zy5Xw==","signatures":[{"sig":"MEUCIGS+DrBmfilmFs5weYEqLiz2JDDGImqS6n36NJmxFTBtAiEA5g6cCejH+1B56RF3k/YW72BpvwIiJuhixx+q/vRIrdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhucSPCRA9TVsSAnZWagAAergP/02tLrj8kAWMV0tKk96o\nnLI7NaMWx+gfwd5m0ywuL5zYFhXPM6ZvRX5Qj8GZkmhq01MCp3ril6FWzvBB\nwWvpDs3SiiYdeRl75FBryggMysn8ZgqZlMascbo0WMTDyJ8vrGojttKHBu2A\nV+trNHaBf4wy6KBtFWBFdSyKivahvVkO1m2Ur9ytyAYK3Vg5Ugrvl8CXeVT3\nk2iKbqfZX8iAF0yWc/ebO3JOBE8FxTi7Nopj4RNxzd3mABJciQvh9qeGfXIX\nolO64/oQd4UIyVHamPEGeB9ZNRmlsFiN84j940egEFtU4LH2IzImjsuCQNV5\nwGhN44O+qKDWV96CyMgD5CGFYZMvCACK+YhR3nmxBRzSbX5mBkj4bMoI8zID\n4M7tikyT1LWUUUqnlklKCvhtTD6we39JL9tKuC10wpYwj1IIM5fMBXbOdJh/\nqf3Id9kulzDdXjgcFu8ywqwmvdoMnfyjwhSP7a/08tNZQ/vD7/Ep+2sUVOlE\nW/VdQ2yA4AobkmB9+4tlslyR2rt1NkvCsNt7u5KrHzMKhb6p3ph8J950XXVM\na7BlDP3cS/TmAFBla4hExFYKLlZtqsMwHFwtg/tlRJraUcf7Vm/A4yRTgMHE\nxQtwcNeitcYfIZxgI//mGuR74C8RmVHVEB/pe8cvcRerFG5psgg3yDVqU6ch\nMWjL\r\n=6jeD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b983e4ceb7c1e794c2b901ce16f12016836d40d6","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20211115103321","@chakra-ui/hooks":"0.0.0-dev-20211115103321","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20211115103321"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20211115103321"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20211115103321_1639564431637_0.7649305981710877","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021111913282":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2021111913282","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2021111913282","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0b8921f6883c9ebc5a6fdd460482b09551e0dd00","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2021111913282.tgz","fileCount":22,"integrity":"sha512-LeRPcJPhPz9Uw6OUtu7TjmAWZJol8808jFwU/+p01xiJTwq1e3555Gr4nm1Nom2E2iY98ebDxy67lpjjNdWuwA==","signatures":[{"sig":"MEUCIQDsJGfaXx7VqhlnJDaLjXlwdZTXbp2TRX7K71LGa2zFGQIgKUhSweO6OsBAW6yGVCVJuc50yGv8kaa0YY6sCh47hUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvzOCCRA9TVsSAnZWagAAy0cQAJCiyou+OqtogLEv+Ash\nIOpUcUlS8CoLBDYoG0aflglMWSctPZ8YJR3zKrbE8hC/J5iBwRNRVY8eIqb1\nn37ditodZm64GmVdth1Yn9uxZJd3HrVX+L/vJtbrQArs2zwOhSagmOC2fJCK\nWzWSUKyHq1wNgb6Ovi0ksjvHjACP210PRBzQvOJWxZWztsEFdGGm1/2fo+AT\nQYHFSlH4eVzNe3SIXU2L1WQ8r6wEoIJORx3F2GkgoqKXlRjSiP7yFKvTqMiK\nQWTa8jg8eXA3q3VX/XcCmkPVAfgIt2I5OZ4jHn1mJD+SbkYKeo42dJSYvTUv\nCw+Jsp10SBzaaGRzDF06GgCXpWbNJIWmlEgd9WbrQhZ1AdypMAFdhwhQkLzN\nc/ATdQ8A6j+1xoVktotnud1AAz/GvayUTmWCzL+3udMrfVuI0ygS5hxACkFK\nc+AKTa+9bpe0fS2FvKyG7vM3VaA/qDVWLsb7dF7BV3cDWUhno1z338IpYRni\nsNTXGsbkAFFVRyKiyU3RZkA4b973vsOgH43Ar0AQQxCKC6TFmvG9TzBJsSxt\nWTKbIwkab4U2mv2yOYClQXaoAHY+RJ04DGuQq6RUn3TIYZHpp8y3bllBy4z6\n/V1Wx0oFLOI/1QCR92Kgt0rx6hDrBFD8GavoDECBJ2MycH17yCAn9RfEGCdy\naZiF\r\n=R8NC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e71186d1580f8a48c8804775328e4dc7266c94c3","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2021111913282","@chakra-ui/hooks":"0.0.0-dev-2021111913282","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2021111913282"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2021111913282"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2021111913282_1639920514379_0.3307048621227964","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021112024830":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2021112024830","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2021112024830","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ff01b6b9099cc6789e7d672b7998c947cf2a3bcc","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2021112024830.tgz","fileCount":22,"integrity":"sha512-Kj/4v4WBST9QD3pO89S6x5cfwTLYn0fSyQQbeO6Lm0PijJB0im+POp4oRfwPuwhKaGgcxZ8JT3jqxpv3rOJFgw==","signatures":[{"sig":"MEUCIH2n2ZVYTtn3neQFJSQYJ9DnfZ2Sci3ji1XR/Uk5TxfnAiEAtjrbhfxzUAWQXAMZmqzDKV0Vs4o5dQ2RabqxRW/+5PA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhv+8ZCRA9TVsSAnZWagAAgAMP/jVZ2sFTRps9dwNQGlsB\n6PKnxH43jZK0CXBAyo9/xQG9kRbmc14gHGV4rbJ6bPVcN/GZU2DhvOZef0PV\nPhRfhOLFAc5aMzCeqkEL5HnpguaD0OwGKB1x8zbDznjZ6yElshfZeEfLq5ab\nHVR2BjLtMnW5Pp6qoHL4bemuADf0BPH1ufz57qhB+3bjn1Vhuqfauyn6K+Pr\n41l6VCwfmQZd7sbef+hNLocdUhJcQfMGyY0h8Wm24f/FnuFKSs2OT0tobanM\nxtUL8gJYCwq0ezCHP1SmhzjMukddVU+/PIfRv+nhu4ygsqtgvjAG/n9Nlyap\nMLGULS+eUnKk1hP/Dv+Q7yj+QQZipBNGVY+kXudqi9Vss910/z0gTEesJixk\nT3kwRg/KSMZWc1J3z3S23Dfk9ROCkbXPsOThm4lXK1sL+Gfl9omnMIS3Xo1t\nEwamWQ2SdD92wilEFQR6yJvCQN8BeDkFOAKGIU9/4V9rO/V6t3YvyR1xkeOC\n7gyNHKBCiSfcKwl6oTUfRwE1ivsMa5r8/FlUe+ug+ocJ+yUwMVaLg2AlymYC\nwEN6HFQyrvC+FsrDwYmfN1v5xxU6UQf2FHrMuXuD1TFKl8sjpQwJB4krqPMO\nR1/J1j/duMiBbnkVQYBAQPxecVi3zbuoKysqLiL4Nzc5wv8Rg3y44OiywHPl\ny860\r\n=7d+Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"f52ca81e6132842c338193d724d8c6d10135e8e0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2021112024830","@chakra-ui/hooks":"0.0.0-dev-2021112024830","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2021112024830"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2021112024830"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2021112024830_1639968537346_0.46934303569380864","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021112031456":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2021112031456","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2021112031456","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b6cd1838af80eb55475a59a1355ba70e49ed4258","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2021112031456.tgz","fileCount":22,"integrity":"sha512-DoSNiFu1NunZga7Vmp3QTFdMoeVI5/tjMPM2Ohtubj6d+P+DdWg9vcdOl8RGx/hwU2g3m1tugzQ3uDknRT6HjA==","signatures":[{"sig":"MEQCIFnDH3mjJS4cyociXie2kjdAX3ZWjGMTsKwYVS0omNuaAiBSnwQFtE42Z9YixHtF3Oma3hiJfvq6JIF1Cv0iFqx19Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhv/VPCRA9TVsSAnZWagAACpcP/1/4yXA49gr3Q7kls5Vg\na/opmSJdoh73N5iA9xmQeglGzmek0UaS335Y45KQnUSjclrhQpas1WAodDfK\nLgKVo7tXR3yW8ALPDMs68/rOjloPTH8GjDvfaXK4RcYFwUOzMYSWCefghC/Q\nLcwGXXe1iqa6byrq2DYowN05vIrACrCgU5hUxWyoXJoF3/jEl9vRZRMlVYG7\nWM+HGeYuO28imy85cpsgAWaO0RLVqDuZNJvn+JNcN7SKxy5bqOOj/1zj0zxX\nnheeFZhmTurdOm6oe58ot3wgPvngmi2wQaTODPk0SmIIn6uwcVaUseUhnBwX\nW4bha399tOMlqBKj69OfhubAjgXSSwd0wv/7U3AtbLPbcSlp86g3LgSQCuCx\nFxCSiO8MkiWAoyZefDr5UB1s4LRtJ5au2w8Bb4NFw7yXgDfrS2D9+G5hMsP6\nCqthM4uRqt5hSULEc5cYD8SHkpzMp+tFay1iYfq43nqsXVTbGy6f4EOIXohy\nOsciuYdj8QaO8UY1z31zgyFZzZm9oOR4z3YTJwOsdNy33fu/UKoh8XRLHdPa\n3usva+iE4/IN9QPBbWLbF/sTKT024kpHo0wnizqPSWoW2N8HlTDZ+D6JQitf\nfDWvTWhOTUApjC03lNE6ZD2lq0sHczc766wi0gtNTYh6O4Xp7eT5BepiphtC\nKZbd\r\n=Hnf3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"9eaa11a475e0c24faa96cbb99d16a919c1bd6f47","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2021112031456","@chakra-ui/hooks":"0.0.0-dev-2021112031456","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2021112031456"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2021112031456"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2021112031456_1639970127500_0.2707822394026067","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021112031622":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2021112031622","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2021112031622","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bb738d0878e19ec2e4e36fc353c17794b1c01a70","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2021112031622.tgz","fileCount":22,"integrity":"sha512-5Ll2P4ColA5Wgl/NFaSLLGS/em1ITPk7KzIC7WrPamcXUht2auIElMTf1eO11Q6KUW5uL8t+QfvxOO74sAQVbQ==","signatures":[{"sig":"MEYCIQDff/jHuinMyeKZwFd05wPHzpJhKbDscRd+jWJivgeJ2gIhAKwzNgbgtzEPnNVErpsDywiwyz3V6finYd5eQJUxwlqB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhv/WkCRA9TVsSAnZWagAA81YP/17MuR/qLW3HZC2Mgln7\narnL70gQBLgawmSBoAPgu1seTOvLWOeyfgN8RUQKteKaetqUU57Ty28fd4CM\nLJOQfLQ2l0fe0RW4BIKeXzxKsXvU+0xaE8AIqd2HH2+a2L23CeFx3nBnM2fa\nrlvMveZRuFmQDsVRPm4XDXV8CLb4RpJxrZZr6ehz/th6CVhkcxRrCD7XBSkh\nouvk6MAwtsnaBZHJCoRyIETMZDUp3GYlGBrqSgwYfv3oQcBh+yEIsGHjSrRA\nmGIddMFZMZASisaESE1RRiF3datkcaUYFuTQnIxkxKhkqwv5s9S4fOsu4pHG\neZjcleuXr5zqAl8foHmpOiloD1i9gK7CqwFTrAXZhO8lKc4Teh0uPxSSZ74u\n7pVD4jrpE/CPyzasBg3zCm0JSvn8KvU89CEuxHB8q0IleGGSPfkhsCDQkc9u\ntuMslokueMb2nF/SGBwzLKyBMZ8rWy+/i5rCLnG/zHfAEraGt44RY8JA4xKK\nt9ehunzaXi3rN3vBTcDQfrP/UL+ft+vtyC0g2OqwWLHTK2QTZXKfga89NT9E\nBLKHY3W6ULF5DTIU+XWzaAbDtOF7LmyQX4yAE4FAaSBpv6TACGW2+u+Iv/wH\nUjlOxk38ry/UzJ+5hcnaBx3ZMeSJ3XfuUKG+pixaGbk051bfK7/e13WBrHUF\nHuRW\r\n=IozV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e6858d2e0f657887b2bfbba959b25eab8cd3e74d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2021112031622","@chakra-ui/hooks":"0.0.0-dev-2021112031622","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2021112031622"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2021112031622"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2021112031622_1639970212221_0.06112213954701318","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120212826":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211120212826","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211120212826","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"96b45bae1b75cf46e19816d539769d65739d960f","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211120212826.tgz","fileCount":22,"integrity":"sha512-KHM6w0kEpFgrFZ48q/mjXkfqL55t4gXdzQ2iL5N5jSq26iuyNHpdTKNHgPm3V1/8gb4JQkuikO44ui8OtzSItw==","signatures":[{"sig":"MEYCIQDljUPtPi2deG5KDNL3IIAxNjL/djVt08Jgbv+kiREeQwIhAJvKF7NjC4aFu+FY/XXfIXcRgnvIqzkWWKZ/A1MigtVC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPWUCRA9TVsSAnZWagAAC6oP/i1LIL9RAtGZAGqUE8uU\nID0P1NVkVdiFnnG5YycPqSa3KALyyqlgrTX5c3iBja/6z3Si4LYX5Wf5LB8/\nE8IWzwr9lerJWk2GP5kzAokWNLCaZrD/QKmwrrU4ZfgrYyXPXtL0NQzN43jh\nkpVfJ6kzcN0reKuI4BHIzfu0Xb+8iMyaQjc61PfUp//Honpuq+Zxa9Mrvo6i\nqclcZ8enIbs4w2IeI8wJ1otfQUSIA+UkBZYz9LUJMwgG/05NJ+Tuf2nGEoYW\nK3O3ofN0h3dtHA+Er5hUGYId07e41IfSgLQq4Y2QduvanUfKqWMjSEoxVs9x\ntgFnpAdNSVzgF7KSR3IkgT0FqxnxtZ5zkNnYJpAMdDipKkvZMbJXjF5aH4ID\nCYiUw2P8yeo7YqifRq3/ZgprZU8Jk/rm4BcUA/2C65r0s51s7TcjOnKZxu6Q\nWYAC3DOUUP9TOdaxR2mlPlPBDA5sCAUWNl5w5cBn2qGOTPq5Fk8nQ0oWGvKN\ncoU4LuBlDg6hgE+6Ut5wvtrRqXM9oaDmadJ9/28cjq3DbFuKnXUhuJ8t51Ej\n8oPtKGtfE3f2gqJB3VxbJdP4erfzX2Dbr0R3pucuIZwjdlLwhPzxAo7umCcf\nsGeU8nyFqFianH5dBZyoNYPrvu6oxpZX73LGD35qX8GWWipm7YNxVnaJpT0z\nsT5S\r\n=8G0K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"4c7a616ef78e05fec559ef1314e6c6dd7c123a45","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211120212826","@chakra-ui/hooks":"0.0.0-pr-20211120212826","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211120212826"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211120212826"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211120212826_1640035732222_0.7852292950884274","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120212927":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211120212927","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211120212927","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"db210b13ca5f583a05d2cdb62c5c97b8057eb251","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211120212927.tgz","fileCount":22,"integrity":"sha512-3EukG5yNzegDj539fatfAB9KZPCXznC0UjIrUVAtovwtVHva4+lJb5yb7sEqLYzTsD9V5Vc1mwRelENoLXFH+Q==","signatures":[{"sig":"MEQCIEmxsHzN7ojpDV32aRIW9PFirpCBa4ko3DAEKzPQCR9NAiBZtFFR7CagKJvdUXgb9F2sfXuvf4BjKX75k1VAPlZEgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPXPCRA9TVsSAnZWagAAnZsP/iyloEWxWtqRxxAgCoTP\nHSYOU5AklXv9IuJ6tM2nsSQ/dMnzMwhVA4WPadE1DKFxRHpqNbvqtU07kAuh\noT2EEyuQfZjyEKWpsSJkmuHdWtPP32DaQY5FmK2PZAgjW/bPUlwo8HcrKy/e\nvZD7hdmOpVFPQBKxwyfDkfxZa/8dGh/tegEbRBSGT/jUUT+YEh8YJKh7/gCN\nqEnBvF67iW6O9k+TSOhPMZ8ypc8KO9dy5Wfw7p5IRjLz80kDT9WzTidLJIID\nZhE0WIZmetnrwr6TejCMyS9gsvDiewWWefovfH0fwPNwKdy8k1CVZt5ZI7M2\nWT0m1VS4/pGA/YLGKlu2eEOi03xvlJTqo97T9VLsKRnsw9f3kFME+cPFTUjP\nJ8h3U58/btmw3oUx3AGj1gcJS5wbrjaYZfeDKfiwNBJdyPpjmhXquaSnpcuK\nVgp40srG3eAgT/inA7nJW7gM1s7cafUwKnNpWeJBh3EoQ/rd4yVjXYnmLNKX\nwXkySJMwZxUAkNMIl7ryhDfELjcjRc0ipLjmDGC8WuQFzP2UFGq2NBODDGYq\ny3GHBxVXO8oChYLSHNfWKd37p3zmRYM4wygDPOMfTcqjj5Ozm/wTXIpFiIFb\n7+MVdlpypigjXVRWqdP25imM6zURjU4s8uzA5BCZ3JoqQSdtJUJ4XlQ2x4Yr\nehyD\r\n=bp7Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"4c7a616ef78e05fec559ef1314e6c6dd7c123a45","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211120212927","@chakra-ui/hooks":"0.0.0-pr-20211120212927","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211120212927"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211120212927"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211120212927_1640035791182_0.9137649085979158","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120213315":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211120213315","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211120213315","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1aad989950c0929b73e682ca61e6f0eda6d728eb","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211120213315.tgz","fileCount":22,"integrity":"sha512-fC4nSNMNSSXUCjfIJl/sKMT+lZNJoHFSb3RF7LuTuV2xQOsW4TC1ziameNnuYNbg97FeuJ1l0puHfODyG9fqqw==","signatures":[{"sig":"MEYCIQDjqB9ESOYuz0uPqpyyMYZAjbqklbdVh0OkhP60eSmdmwIhAJwetJHoRJWFXbitdhUYc1TFrQ5V8gtnDz2nJUNUOgbJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPa1CRA9TVsSAnZWagAAEVAP+QCapdIj4OdfZfU3EzbK\npxZw8k3E+Yp2rAhdB/2QHkXpzfhzlLHPF+t0f423Jhx3K7b3Hs12HZeum+kc\nH/FQo+BAFqllfg1PReOnKRgiFmLdnKbz0An9NCzriXMXm8tlMCZ7aqQ3+t80\ndOxkwk8diL7NJ1z5mKLF+liRZSecBphrOMJeaJnPqwyul1RxR1A5XD1K2isO\nVpqHYqjTr4SZsP8g5N1lBfsXrPyZ5fvwtv4JS8Dz57Kh9IEqtmS0/Obmoyzh\nMa7PX5iIXek4WMoMVKY2wzO+6xg4VXWJQF5kuwBC9Poiryz4hd/6XNxcP2wf\nY82MGj61c5RITgDnqzSzbslpTDqJlLE7yTrYRR5uNGSQcHyNKo32kDFHK1E9\nmWyY4eJPTiRluB7RO22416rIYnuhMYbZm/H0NNmNfThNf0hMawWoAGspvjn/\nR8Usr9NDDZVWDC7lwCbhdIRsjMy29qbCAP8RyLYlC7nKmvsRWGWc8RiPMg80\nqq2IBaSpMJYR21C2EBmwrrE6ytXNuqTKpHaLD4GdQLqoQkHnXCipulRzcjtL\nXuVa7Q+NOtnlQlfFHtYye+yN4MLLAoZ/lofU9er3bdneR7wbdS4crq73AEwD\nx2kx2u0rSG2svee6YrlmR57StE7AsWYqWN1a9a//yXXn7cSOnt8V0Mj7Dfht\nqvEX\r\n=TLDC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"8d66b048a634383c0f4a99b7a5255d1bd0e94fd1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211120213315","@chakra-ui/hooks":"0.0.0-pr-20211120213315","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211120213315"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211120213315"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211120213315_1640036021654_0.07170404917652995","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120214314":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211120214314","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211120214314","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"748baefd715ca1b365c197b74df5ecbe6738cd17","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211120214314.tgz","fileCount":22,"integrity":"sha512-LXQcUGEkbrIdNgfYByD3YUHtyc1EgAz0Azsl4rNbKsUiFcRQg32oGvpjF8ewje/r98KHq/Vnd0Jd9FemZ/k/jg==","signatures":[{"sig":"MEQCIFw4rILRYIK6WWcqu0U9V2TvbCaj4D/2M73nykfR64qPAiBslHVyu7FYMNCp+cMrWmKYciHQTBGBC/4LeKDyu7R6DQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPkQCRA9TVsSAnZWagAAm1EP/ioe7LzYKu56BpFwOPBg\nZ1bfSBa3o4XWjLoyCCCvza54tie6OGoSzGlIQ40QhbfKk9Dui6Vi1JDtoKH1\nPXyQ3gfdaGhNtrnfLJpyTYmDMhC4ZOmTJgizpaGvXblpubbewumTJ+e/iqf+\nTec4MdeBasM9s1QaPuhuI+7qsV+DERPsoKYyLa0wyLQUkyflXKbKisUEJgxS\nzPKOJwA19FnaaVaJXn7XevYT1fPgM/uBQOoRPjDVxzS+BSmlrewuh+jhlU5i\ndU0NXavMITQlFdbFna0aXaxGqMUcGpQlKNvmy6c2tAgcEL0WXv0IzSfA7zKi\nne9zWc5RbemobG/2Wh9+dpCiitutgLCRlB9LxO9W7Ijs0c4vtgS0S/syvPFz\nPjTmw+JzeERsSnf9EYIRAn4yWqKS7AcKQ7aX2a0pSkk8gUc5kel8OAaE7rFL\n+EAwkZjea/T1WoaqO3xiaXkyXO8p+5Tymk6wZYV0Gq7TeJDPBPFElukLZ9CU\n5dMilUXyDgjn7sgruhxTrxolLD7HCx7BifCyoqLnxzFKlc6mCDgAezYsrZaC\n3YYbONihYDSLOkRUM6VHkhsDzmRWphoo3fYA9TbPZkkeMs+W11QP9wBo/ZGH\n9+lTe0tp7Xc6Je+NMUb3hHqRpKLS6w/8R/3xyYPghIWZ2fZ+tHVTTODYL9Su\nDb3e\r\n=ixrn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b33d07d1bc611e7f89c90ae40aaa216980618a62","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211120214314","@chakra-ui/hooks":"0.0.0-pr-20211120214314","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211120214314"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211120214314"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211120214314_1640036624147_0.302151690478085","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211120215621":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20211120215621","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20211120215621","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"17871b0821399e0f1fe0f469b674f2af69f359c8","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20211120215621.tgz","fileCount":22,"integrity":"sha512-GNPLUA9BfPu/4oZHbLLzYTAFBpAqbZZQfjp1eqVBJzzrBIvuCkatbUmc7tk238ci50Q6tYSsohXYx/W9TId8Pw==","signatures":[{"sig":"MEUCIQC4wScp/sCz3XzBi1KLPfRYncJIRCgcCqOUmobPqi2wXwIgcdfxZTkKiUXrIls8Uuc5fBUMoH98yz3wPbQ/MozgM/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPwkCRA9TVsSAnZWagAAgQIP+gL6gg1NaQvwuo1eW/fS\nxj2wpl8Yq2gkkIrFP3E4MkAIrZKzwxHemQs5pH6qiiHEjmAmwVoo2FRWbqWi\nvLXVEKXtS9nhpxq7UJfqCLX5ZA7PL7kBF8l3/0pAPDFNhx12d8uDETqx3sJ4\n5uNhA2ugnqczqJJzjWQu81frDXUSUTLN9zB6aMqzPvgIN4YTy29mTnETGoVp\nYt+0zKcgkSs7jUPZ0MW4slYEMzDYGmRbAoI1qi0aTFax8GNOaOxRdLLruv1g\nk8IP9SmqnF5lrM26kpGKFeKbEHKZsZmdjy3WgwoVKcWY4B7r1Z5ssZyaioEK\ns+j4mIHvRTUtaS7EAjT8e0KBx4nbNe2WtkRu5ASluhbC6/7UK+1H8tG8AdZm\n3PTUxn0QoPjZO3hUWL8CSXnwgVQNOYMOrMIN1cysvC33exz9QZB5ATZg6gH2\n2exLpiJzA9kuFu+Sla8/ZvvkS1EFE4QICXi9nDRZgiX6IfBUKjXqIJFbOm3M\nXFJHsIMCw/T8wTAzN+cy3XoxoLgaT4hVdySME1aWlJ1BX8nhEBLqo0FpW9Fm\n3qT2M3LB56Sff5HtRTkAfCYD/DUR1E+6XWDclcVF6DPG/If4FElBp6n8qCwp\n3Vdm7lN3+e/ur1dv0luC7LhRA2MxSIrhUo1gPgpylZB4irn+DpzvbUG7PmBx\nGQQj\r\n=WcC8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"96c4aabb5dc85bc41b00bb5fe4e9acb6c75d0364","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20211120215621","@chakra-ui/hooks":"0.0.0-dev-20211120215621","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20211120215621"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20211120215621"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20211120215621_1640037412617_0.591079903030544","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120215645":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211120215645","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211120215645","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a0435ce6b96779e62adf15d3cd0c535b7567235d","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211120215645.tgz","fileCount":22,"integrity":"sha512-ykR9oGp81jmWoo6mhUtxg3KmKYhhu0krBncUHLjX05R63GQBY3GBRb8FJJCSq8UmQBRPiyr9bXssruiBUHwx1g==","signatures":[{"sig":"MEUCIAux8Nci/4DfnPJ+XAv/F/Qeyfip0f7m1A89NIXWxv9EAiEAt68uiS26ON9M46k000sQuupmRIyV4f8fxXn+l6ik0Mo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPxACRA9TVsSAnZWagAA8eQP/06zLlzuR7CdT0GB1p+N\nIn9YVbsiomrxeWJlpy7KgTxrm8tL1z92UsBUACZS+oPeS9UsCzTmzzbxNl0u\nDyhih44BEZ1D7pGym/z7ZKMie/h0RyCZ/P5kIRNCEjsbyTdzG+kM+0zTzHla\ncJ5Vg0P6e+OoiH8TI4XKYi+3Obg4O/pCMWAQXeu+DKxJgULE49MOndtsBoEo\nt+11NDC1ylnqCiFPuByqVJ/yfoC11AdGt1/VmGe2XRXSenrnsoHHNo+0toJR\nv4L9ueB+MLxmDRb72LYylSDmRwJJdr2f4aGnnEj3w5o9g7OLhceSD6dW2HOT\nrZwmid3ynDoYKqnxRYkV5rkF8eAolGWXF8yNxVPfyzYyXUTJaczTiEVtVErH\nMiz+fE5o+Vvb/CKaT/pp/Z+JgA1nImbnTxq5v4xERYm0KZ3CJGDJ9gf7TLXz\niFSwZcLbBk0xgHFV1XaYSikkqslbxr6MgPLBsQ2fTfWq2Js9+FCa7f0RZt4d\nU+d+N3yxZuAvwo30FITz9Q6StxSkpF+qKBHNYFkaCArxjwDrrRZI2ppIDSj5\nUzJPtrPKIpaBkKM0I31MqqveG1g3dSFueMQdcxuDGXnrr3W01w5tqGSu+0YL\nNqtLBwPsSAeLhmog19StinOzOhCyA8HrNP8DLFjDFsTMAd3xKiaRhNe+hNqw\nH2DN\r\n=C6qt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"96c4aabb5dc85bc41b00bb5fe4e9acb6c75d0364","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211120215645","@chakra-ui/hooks":"0.0.0-pr-20211120215645","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211120215645"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211120215645"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211120215645_1640037440731_0.6946992274613448","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211126151058":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211126151058","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211126151058","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e5f200e1e0807bdf0e506f66bfe7c90d5391645d","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211126151058.tgz","fileCount":22,"integrity":"sha512-GtTQxo68x1m/eRC7wIgAXwHTWlR5GHAS/LoAEmreAF7k8K08ZGfmaYBm/L+8wCaLdjmxQlsAlz3IoUC6+balyQ==","signatures":[{"sig":"MEQCIGAYpLdTQhLNHHgTqyhDKtL6ZmIoYBnU8iu89fhMXnq8AiBBSgbN+RvhwSamAc3Sv/JiH1LnjRfePtlbiGgmP4jZow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyIYgCRA9TVsSAnZWagAAPjoP/iqQz3RZ1GluFPgh/Gjm\nzECwH6QdFAA5glSyLF11F/kQLYBo/78ruTCSCzxrR1V6VHGl8tkVPQgQD46K\noryiARfbT2zGAOxckpew4zgCFraTwTTcB4y0PwrGNWyDbaEIoqXfbVpD72W+\nZmU5jtoVYii1MkJhmPaH55vtuVDWjKqFXnh3MgObJextwquMF0kYTacn7snl\nPZ4Dg4tncAhP9rI9J64HTD21P585Sa34Cef82Re05iuaNZojlq9E4ehEPBv3\nmkJNAsCbs7D0fVccigfhaz+4LwQ4QUArw8YqRwuLfZgLPqPdCY8+30nZBV0T\nRA/BA5Ds6v8QSM5uV0jTrqPdPoxNzfoNpvDKYJLiQx7tVoSU1RFGTEP9Dmjt\nc9gEoTAhzfbw3FSK9a1x6tu8kGG9cPyxuARfaB9SPVZavq9950cSa7WsB0lX\nLxgwlwic88IZkJyQEdPdkQaR7g3ftBoBWVowijdYk5dT0V2j4O5JCklFzwO5\nBjg4WI81YJ50eehb/Wm5aR8yEIT4kqkB5PI4PgfYT9FMjY9161V0GTtAy0zJ\nveOsHIXGO3vyNKRsSgMD2ZxJ0yoikK+rgUIjXqkojUJaU3mBESc2wqJ6LEey\nrNI8K6Dfd6CHRbEvrcQ2zKvQ1c4l+ipRKp2mCl/7UwMTPY0PVFGx6MjXk4Tg\nEaFq\r\n=XCCu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"813dd6e4e40578420b9934ab54d887e35f77a8f8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211126151058","@chakra-ui/hooks":"0.0.0-pr-20211126151058","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211126151058"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211126151058"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211126151058_1640531488063_0.024144811453880255","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211126153437":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211126153437","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211126153437","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e464fb4ed8fbf54874501ab1dba15794b6a87bc3","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211126153437.tgz","fileCount":22,"integrity":"sha512-FoYchF7YndACV9WTKMQ7n+VfSMSc5Zxauq2gbZ+jI26u+D5VGW1ynZSP59lQaew23aQ/RzYxFxdzcsLdWNYqww==","signatures":[{"sig":"MEUCIQCy9bNCucKnpTrXWKIW/XFf2lAJcY7V4PdpDwotjr6LtQIgJrItPRCtFOTEGqpJ13f/wGwVMaUIUYKgSnkWvKlQ6ro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyIuuCRA9TVsSAnZWagAA0MQP/3SScmfGlayqeXeYry1m\nm7J0uptMbU+obIy8tTqJfnMrdY/5Dky3/J6dyKgmCmJU1JDyhTBWatJyyVSN\nU8u5royUg/GA/BxWxKDkcDgTdnm5Z0bsPbp9qiPFGxsJC+x9d/kE9cySBw2a\nOGCF7IVMGf1DCKKFVOcF8+lULDwHzPZjAVh3ZTSj0uLY1h9xoPNdXivaUQ12\nmD3ksZV+6g4SpLX0ekX7BzNoNMwrV7iOZQYuayYUGRZUwtC6KsE/QwVQfkSx\n+xbKNmSoH0ejMiS5mVWbNxKMBIkjtdMLWa0YQEtwI1NYYz+6TmPuMu7e9C+V\nlxth/jfKBq7bMAaq8gdfYBPF7e1m/0qxsKmGh0IEAxYUIInqgIKk6miKvRTo\nbO8pZyip8k6k1lUVX8t8i6Zsf9e9ZGo4yjUdED2uUM8QqUrwATMHvvlOobZz\npnYTLISJW/ouY7nxjcjVsewG60hxu11UMWtlRd5KRaFic5HVyD72jn7d7odO\nRVyqPZp/1QTx+3kYjxH1uBv29heSfzKb+T5jMhFcd9nXHOWrROBqHpYxB5VW\nKqdvNk3wpttsXSBEnGvrd85H76IkyLLAJbTqIqUFrGUwzyCo5NpcAXWgHEWC\n5sMJEojusU0p2XaryORhQi6ofwDWjh0kZ5K+ELrjcXoBY1lKlRH6Ng22uMVX\nKHL3\r\n=NC7c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"813dd6e4e40578420b9934ab54d887e35f77a8f8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211126153437","@chakra-ui/hooks":"0.0.0-pr-20211126153437","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211126153437"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211126153437"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211126153437_1640532909994_0.9534111346168268","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211126153854":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211126153854","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211126153854","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fbfd5b882a4cad3d697b5bb0a20db771ee26cd09","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211126153854.tgz","fileCount":22,"integrity":"sha512-TironmQpzCN3hPT0CYDiz1DXGsixyDJQFDdB3KJeoKzl8d/s0BDP3KVVGHrGbjr+Ulgkqg+y4wmLk6Zrn7p03A==","signatures":[{"sig":"MEUCIQCYAdMiu6tBmskPbFj4tAGbMtbvggxuxBvPxpx3jw73wgIgA2ucHTNeDzw8WbGdj5agxdCvrFgqJl+gz0f8FnoK2pI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyIytCRA9TVsSAnZWagAA1JwP/0f4j+pWEG6YEEA3gxP0\ngHP97Y9Bl8yaEhQEPdoAJ7z4THLup6O5bXAN6PvA+hUJQbqM0ZBMnJCHS9Ob\nPFtj3PR0zZyYRxqLR6jh+FKuExMCI0gw9JJbzZRLjfSebF+8xYW0I4c7NOxa\nKfiuOYTrsVZshwE/n7AoTlPtL+DyPlLfLM/03Ln/Vi307dt/bV/rSMZMwLOc\nuM9tQvsxh33YEqJFdPlp25SCEE25aUpeR7SUS+ACPOnYExXSiQNMAbnNq20i\ns8P8zlsveVIYc4pJ0h8zQpZDCv1i97CkEfzQ+It/ktz7w8WeOu5FA23RAdQy\nsvMZZfUHmPxSB45ryURgxPPM4FzCMRJvZoAQUqZXijqvYDOfsEommxdlFX9+\nyMwTBo+jxCZ5Kdc4+H4a+rw+DnsKfPQUchdzV+G0ui4HNCLxwf90jbSXLqAQ\npR8paWAty3CfMy1ofGJZcXSVh2iPnaNbL2VkMFlU0652q6k7gNHEG4u00Oue\nUHL57vubmsx9aWzRJBliHWU7G9DHJsIbbT4yzCT4u0QPHm/8QOHkmYR8I3TV\n9bcL9cKXYe4ds1cRB4LJzRNVLPMUr0fyon4MeiABbKuC8pCJuolKAMS+GQ/W\nzqSFw3xdQtIdmHwUo1NRdTKyKjYrntFaGVTsoG5teQW6fJpmTiKV8kAOvmMg\n6miR\r\n=WYK5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"74142f0ba07766ee20c4fb6b11a92d6d69eb49c8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211126153854","@chakra-ui/hooks":"0.0.0-pr-20211126153854","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211126153854"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211126153854"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211126153854_1640533165722_0.6877996303132399","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211126154235":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211126154235","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211126154235","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ab705cf8863577d05c2287ce2ee0a04498945597","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211126154235.tgz","fileCount":22,"integrity":"sha512-Iq0foY54tXnMyDD3PSuNxmcBjYt5bR4PSRYRcktpTJn5bPG4ii1iE3Ecp3diCnCjlP2Ni8CYgNyb7lRaFT5B+w==","signatures":[{"sig":"MEQCICvprEnqoOjs6/kLnAccWP1/Qd01Ht9hscwiXGFrif6QAiApkxd3nescuqGJsB6GIstFZO0kj5e7WP4fXEF/iH/S4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyI2JCRA9TVsSAnZWagAAmxgP/2t1T823uHyBrwOjeDHz\na51+p7KT+FkJTeYqVHei8mkcV3ur4fLi94wU31Jxhrkrp1T010nryl/tNxwf\nObxMmHS++HZEPZw4t1VUr9W5tBfUX+qtYxt3tvz8UDJeqk7j5qgkG1aB7cIz\nclG1v5D4a5U/5OXx97poiDtoYkVEg0/C0OkGMGTKSnSW3vrrxg5EJcW/gU5g\nXm0m4EqK1eVz/KgYzGhMWvpET7yaNxrwOCHr7hpVddOyi/0MLQzzd5f0Efiz\nOlooHKX5oo5LajwUbqJShxKbOIx9CeVstwtUTMLA74xOUzQM/Gx7uuuzvQCJ\n/LajQYN4MWTfQ16yInzPuQEmhmxdjlye8EzXfl8KU4ebU4N8WVoCvFDIrYok\nDkubltZFdu6Q0HkdOMGPJa7R5oLGbVeb+q4ha9fmsY0NIrsOxniaDoIN/Fvv\noYpSv1DyPjq01pecJX4nbTWWCMdYcncj9WeG8aOSksD2Tkv8gcpGK84pprym\n+Jaz512I7Nye8nSixQ45+uJ5ELgpZAlpePjbNpxnMBoz5axIreHaQR9WROAc\ntbHmE+6ygzhGBTfPYK/SkE6fuPoars2bi/QkoHRPnREdBk7F5ZuiQhF+dTKr\nnd4pdO5LmI7Irgx4ncMykF4o/PFEQOPGkbXVO4ABBcP1rhfxZblY7rXEvaS4\nyFOg\r\n=F1j7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"ae6fd7a25c543d089d500e328596b399d85afe8e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211126154235","@chakra-ui/hooks":"0.0.0-pr-20211126154235","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211126154235"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211126154235"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211126154235_1640533385743_0.18164580031445898","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211126154241":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20211126154241","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20211126154241","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"556a8a6ab215659eed57a079bcced86bc0a03dcf","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20211126154241.tgz","fileCount":22,"integrity":"sha512-zUPJtKKdKbytbneQXoH8VcghGuic5b0QlnJF5yn06ZAUB+SWWRheylAbBLPbVVCr9xCbcTrfK6MYGYRd120+mQ==","signatures":[{"sig":"MEUCIEj4nKhItNUefiehnhHhyKNzxx7oCurk+CpoMzlnCsYbAiEAnFLkacLx0KwcpZP25Qe6lhlIOnTESym/mieQojaAwqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyI2QCRA9TVsSAnZWagAAB40P/2m/GAh6WqPQG2cs5cjP\nYQvJCyBaWQnSg4Co0yOOMvo4C4zcndFOZ9iSukpql7fYLRVfi62xWbZPQR93\nHOBF7/cN0DuKt2oS/Toq977Nlm2Wv9CeG5F5YE4e+ATZ4QtAY2RMrtucJ9mO\nnRn3Xvf1cCQkWKo+9chuYg7RlGkiIc+3coURX2gy5P3Tj7Jrd/WxUr8OsH+R\nDRaJlZ/LUZzD1qmAn95idIOJACP1mx7FJs2Bgmi3iXeCt838ZS1I+3l8jrhl\n+EyHRpgzV8571D/WfrVUnThdXnoAC2CbtIV5krpDmyuL9DkQ1G3Ih3iAvQ+n\nBqXd/K0oHEgUD8bT7Bi79PaHjRanNJpCgM364skhVcx5HWyVFPc9UozyDT8A\n/8nIUJtgSNOuyg+9cQEvsiNxi2MOiVMCfFXhUnJbE53+uReYK2EMHHX+6Y/8\nTvWH/NAAY4PKiV2TDPBqwz987k3duYygaV+JzSKrDtp2GAxG1K0shS19ULvS\nevjwPPH/iNdyKxzf8/yq+jH31M2LLX9nfKN2qVay/SNj6rGaFlGXZlUMSvJK\nFK0MFHEPOFtnW9bkcP5q6NCMhv74ufgKx7utMGWLmdYC8xGT8htKwSwnnVqo\n6KgS88NJ3i7gS/N5d23xs99LCeMRVVXVnGMcKTD2OltqIgmhUOJGel3obUyY\npjfN\r\n=Dr6p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"ae6fd7a25c543d089d500e328596b399d85afe8e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20211126154241","@chakra-ui/hooks":"0.0.0-dev-20211126154241","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20211126154241"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20211126154241"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20211126154241_1640533391877_0.14616506613557667","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211126155055":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211126155055","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211126155055","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d375998a2fb5280a158c07fbc6466f286edcf3f5","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211126155055.tgz","fileCount":22,"integrity":"sha512-82CCc8A51bYFJIzo66BZ8yKbEWmxbL9cIKODDhSuN8Oc6HqDxS3uv1hXZpqp+6NoQLc5RfxpgJq9L3rvMpyIeQ==","signatures":[{"sig":"MEYCIQC3Go7Zf5Tv9qehr1vlGxuyg+6TfVr7syXIpA9CFnHkLwIhAKl7dd6L96o8soj77LYJVdt0t6YBn8WMt+QwBpA3WLUK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyI98CRA9TVsSAnZWagAADVQP/jdejz1IuhC+gGJalemL\nrFzHEPE2vWCYiUInFDMThwMk504t9Wddq7kEbKIzTWA8gbSCu6/8G4OQNj9I\npfufMJJOIriVE/4s+xbFzEpuQ6Y0RRWxM6BX5U7y+G/gJxOhe+nZmFlrOgNT\nt6YI2cJlwlS74X0rJuegnPDRsl1tirTQkKHI7V6bGdcI76VipyGz96PP3gqS\nH9mLxVFRBA6+a1zzA3G4KKGc1ye3YA+OPX+a1QBBo6BaIigH+IQrELw2w5I2\nuldWJSPOLUwtIHFufz2VEH9WbQMDhnKBSwkFzUE8jf/4WQ8xiIR858/oX4KO\nt70tn6K3uBaR96nJi4s7Reza2dUW0T0AwLh0urXCOytfozTvIA+c2OkiY6dS\n4QwDWOqNfPLc4PBMzsUJNXtwDD+detrk7N6ULRbxvItAsMkPjbMCPI36UAqH\nuqlyFumNgo3x86ZTQLAEJLpO7OcXktjB6J7y0lGrF0baPb2eo6b8VWRf1CU4\nrYCZtIBeKE8zQIo+RkfReJUP6hrjWtm04cszmtO40hK0xHL95/HS3ZW9VcHG\ndGqMMSC1BdfGI9HqbRXh4tpFGZS3c2iqHxZ111bdUqYK6ZgpfI1LQ96IlsNQ\nW0TlP69yLpwcjftU2EoAmvC8kQxLVUfS0a6aaEEXcCbAdcSqMX08wpQDxyzs\n55t2\r\n=oDBS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"74142f0ba07766ee20c4fb6b11a92d6d69eb49c8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211126155055","@chakra-ui/hooks":"0.0.0-pr-20211126155055","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211126155055"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211126155055"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211126155055_1640533884012_0.2796008380568722","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112616030":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2021112616030","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2021112616030","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7613f742ced94a89c53f513a7877d4f749907366","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2021112616030.tgz","fileCount":22,"integrity":"sha512-Et/qBZs5gKTJ/CZBU7uN4irOxhZOf5zvFs0zf6oESq5HFnKtfzrFALp3/H/B6spXdXy2bDR7z0HmLAWTrAKljg==","signatures":[{"sig":"MEYCIQCyhh844HJyCHnYUnqPNWjjdyGvP+Bo0xUKt0bSkDwiKAIhANuNOrWICo4i10ohQF0jDjY13IpklUXWrdBo/O8N2P4h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyJHBCRA9TVsSAnZWagAAEzwQAIkSB3V3Ybp1RTWWmlbf\ngGHPkrxUrwD2D/zXSkjQ0iDuHa95k9FO8lshPvZhHBf79uhRYolFn/gm282h\nJx3Wcp1WcAiAlpgdlEDMfbftaI/Sdul1z4DQO9i4kiTk3wJXRI6W0Z3dOJIs\nrNxCBUab4JuN34Xv/6oq60GqHFSLiwEBPkYA2fdfbnMEpWfUtQFVYVqLm7ae\nK1IE1WbKm1WpWtihJLJoKhegWa4pBiayeRGjuzVwsQqkPthb6JDsC3VGkmOX\nxOZxbtN6qpTdbWSlqT1aaHDSJ3COJ5z+vtHHPnLFTl9AElph+2piggcVO8RN\nOMlZMunMmxdLiGTt32kBG9SoknmagGJvX+w0BLUhMhg1XUpjIoiOCEcrEn15\nk1PzyxNTFJxgdgJO2/nmCrhseX+k1Bqorjxo6W8C4Iau9I3AmebwfvbF89kj\ngDJgMZqRN4nCNUXoT44vnwwkailyFTOKClyAlJC8QGDPHYqWLucSWuSDYF7M\nyEst/fpPrcJf8VkHAWcf/XqU9a9CDNxJ1b1zm5ojYn6k/mpDEmljiZg2toNe\npb894QG5XcGlW/ApTpDJIaSw/cVoxa+Pt/pVyAdmCqmbRVGOiGkbpAN14LuN\nQox9osY80svO6uOdKTp+kHWu9aduhKLCVbXnC6GzxACh47UJa7MQj8uCTxh/\nMEuJ\r\n=Nroy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"68bee23eec488c69850f49cb8c6e55c266c66509","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2021112616030","@chakra-ui/hooks":"0.0.0-pr-2021112616030","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2021112616030"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2021112616030"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2021112616030_1640534465559_0.9167949796924952","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112821613":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2021112821613","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2021112821613","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"905f10c981c57c03ea02e46f008f68f79c2423b2","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2021112821613.tgz","fileCount":22,"integrity":"sha512-8liW+PIzdYg+0xt4YBzSO2hvubYfaYDUUT6nARcTw0sirPNpEpBlYGyyCWq4vMEzoeiBsEIJsVuaQIS2zHwQ7w==","signatures":[{"sig":"MEYCIQCHuAP65fCegIlN2hJD1ullBNqVQIy87a0dV/FvDJ/y6gIhALhFiC3m14775nEU4XYaewISnqwrrrQbRYY5HC5Ca35A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3xlCRA9TVsSAnZWagAA2dQP/0JHHPXqP4uKWAoUbTXW\ng0Vp4ZV61YANzTVmnJEdY7NOLctcQ6hn6uoFJigFMW8+46z+DxE4NImP0Nhe\nDUKFej9ONvL5xiy8etO4+Frp8r5O62G1FeCp/p/VXBw7JvGVL/HcheC88uMi\nZBZmVi8phMuwuqNIVSAfmr/gmXG1RLS5uSplXXo4fJC0DwyU4ZsarQjPS1OB\n7RXpowP8+OVraaSIXifCV81/QpdByfIFFmY2pYq/mkSCfQEZBHRk5FoBcTVA\nJ3KmRnE42Ez4RAlNmZaBeHixnW/bXmgwDDK+wHJGstIG8hBZ4axXhZJa+fvl\nguee2o4fuUoXuSOfKQSlRNwFJqLENl2nkohphJNulbuR2zwIRVaG9aYA2jRv\npXI3wrP0wzsz8096a/lCW2bukraIO/cqdcml5VlTtq8BXOCE57Uyg4CnzPHc\nyd9eZZzbGGO4LTrXnb13uI7ZtMNsWLcOgAAV+F3idQaCH1s0LGbE28MbVZcN\nbdNNp46kZLtjyo2C2vdw+PIwuVzVp/k3K6JmclhJh4e8UVuBzrftAKeTIJiL\nl/4Z50fO2xrxJsnGQHMI7UTQXa0i7rG/m4j1mm7D0I8A5xeGRGwdwmMHNy/H\nsYzIG9h39kt0z7LLek1qNNCXrJ+E9XQRDvmnt5I84XxmGdI3tb3strW/CqDI\n019h\r\n=Sp7u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"8721c354cc8b43b5dddf82b9b9fa2fde731318bc","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2021112821613","@chakra-ui/hooks":"0.0.0-pr-2021112821613","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2021112821613"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2021112821613"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2021112821613_1640725605716_0.698921617306832","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211128215540":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20211128215540","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20211128215540","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b1f16c4807437af12529e48da638cd82cab6342f","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20211128215540.tgz","fileCount":22,"integrity":"sha512-hPRu0CdfZRse8jMIxciNyORguioue6yBNzO1j34hGFFOeSCGbakg0QOdeGz6pOLzo165bf0skyTkUU4/UbVA3w==","signatures":[{"sig":"MEUCIBA/S8nz8R3LLzDAXP56UMHXRpfp7sOwGkd+YVPCmqwBAiEAhntkoRq4nMRqjpHXN2zknHZn/Xmz8sQeRUGySkZU2XY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy4f7CRA9TVsSAnZWagAAgxkP/2efTurCPXQFLVPWF+oF\nvQis0W3euGcwOARzlQgii9tce2005asB/Q87KJ493tGFy63v64izS6V6GE96\n2QYdoesg1UNYLfesdVmh+ydMggFDT/cFuPVSFTevlpvI+x+VT9dg18BELY4U\n8PeiNqJ1D7ehdGX5oJbdENtHO4U4cj4N//xk+3sdj/KfryTy1zSWIJ8mWs14\nc8MLXi5YxSPbbBD49cAzvrgjVr15XfjknAgGwavHYvzfI5OFAcf3lC+QdoK9\ndKlg5guiXzFvv+bXYeGBVvuWf7Qsj7Mq9QI4BgLm6Eyc0FRb1stN4ROdzW1i\nE96/m/H7x9x4SkiKHCd5sjbS54XHglDYVC1WN+fn+RKPdikKk2VeVDfU8v/K\n23MIU9fqqZ2mngWSqqvwiuOK8NC7fZSINg8lYZ8f0yV0ygg/5DEDeNHSRSR9\nvzODjOxAYwvnVzG8Qcm9eiYtD8QglvbkcO8Vgq1glQkZxCtKxC+WrzsxuUQB\nYnmYOUdgBwcvV9POvEXlGfxiXfHfVkyw0Jpe4Du8OGEkbI5o+qcU9QC5xjdU\nekE5Y7Vp3twQIADa7OrXV/uXxWkgLwuQKoYot6RVKX45/l/a6G8HL2WxFbwJ\nkNfyfgpkB2PCru4vNO4IvOGHvkm5nIRO38Uw3OGwVAPW1/uDK0zN7gj+Eei0\nlt7C\r\n=wQjt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"7da8a15cddffc97a38ff48783a0ef9f5f0657a27","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211128215540","@chakra-ui/hooks":"0.0.0-pr-20211128215540","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211128215540"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211128215540"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20211128215540_1640728570938_0.13149412080028156","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112822349":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2021112822349","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2021112822349","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cefadd59910a29da1d875d1948a1611b046187e7","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2021112822349.tgz","fileCount":22,"integrity":"sha512-93C0W0IRbODpa27P6+3UCmxzzSFuno8YAA9cBtvhihDJj8PFCufm89n5r4Y0rVFwkq0Mn0jnMEWDioOaB54v8A==","signatures":[{"sig":"MEUCIDVjTA1o6tSi1SKlqZJps4Pi8twNtkyFzbx+IRXWk+q/AiEAo44wjtnvqmOr7Q1pnsz1Wna63ZjWW/qU5uhTgB0hdYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy4nmCRA9TVsSAnZWagAAYIQP+wUFqgDvWXoo20VAfl7/\nz0noIpKX4tnuMutcZCn5ts+8XLwJXw1woE1FUug8xmnzIYDuun1sEpTqWsEF\nfYX8LiJ3+ubZpdbnKrxQQd2wnvEeDghx99DOWGT1y1HjhepwzDuIbagXL2ob\nAMn/PIl4yTSijE2GNqUefYJDpDABdRv8/C4aSnkPEBJzU3orXsFBXGfa0VBA\nV7Bt1RgNYe5qEWB6otRcbqGRfUqkrYb+Q9UbVv71sb7CdP1NU7AoVKee7+Yk\nW2TCNSDKX0PAnFuxMZ95j9T4wPColcqbIhLem/1LgJEbJK5tgMHpEluuzTIA\nyt58B9m8FefLfQwetVVbWEjJIR2ETtSEPlGyc6pwzN8HrMaWUmphmOWNkb1I\n9oFJWSDqfTaLhL6VyFHQdd6+qY8Da16EuM5Q20l/kSlHKLyzNGmrUb5bmth2\nO3h76afdvMjWYKDVVyt6+5ymoL6MquxwQpv5T6/dHBAatV+p5BavCwgsiflK\nU2+qImYqbaEeyf78FCPvUsJF4S2IkpR9CKq+RW8iH3IyqX7wydFon8TEKr9A\njP7FhbZi9U/WV1ACNBML/xorkFRVUaTrM7Wuhc/VwbI86HWN/8hjPu6lXQIf\nh91KX2EXqGSHtIie3L+vUk+96A77cmbggVgVZXYm8Fr/UrBGGvIeuqp7xvQj\nIHsm\r\n=b2E1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"4335a1e34cf752d14f9e54805755361afbe31988","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2021112822349","@chakra-ui/hooks":"0.0.0-pr-2021112822349","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2021112822349"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2021112822349"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2021112822349_1640729062239_0.9304771269503704","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112822415":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2021112822415","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2021112822415","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3f8cd8c7c1c2d6e04f73aeb549ee5abd072359c8","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2021112822415.tgz","fileCount":22,"integrity":"sha512-TbZAmAt79h1Wg+CEj7wjR6A9xi84TmGXM9l4iQy3GhQnox2VSennsmBbVNZzgOjpItUtu2ijmBjLV8kK19TnSA==","signatures":[{"sig":"MEQCICRXAOR45mSH/1UaYcQCNROFp/JVe0iOWCs5f/TbliVnAiA3tEkxSIip+RiuasCxedEq3UvlShR9PkqJl2Z3kQ5rVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy4n8CRA9TVsSAnZWagAAUVEP/0AVefOu/LnGc5ikOd+H\nyD8OOXlTPSJ5fQN7sQhE4xh/lN+8h0hipmQc7unFjGAi+2oLpUCAmtQYS7F2\n8dtvbSIOyQLU50bqQ4xyvX55JmLd1dedszWOW5m7lNQu7w5uf0LoevOfhGI5\nwv1S+BVa5Gd7UnbG1pKSxlNOZXv7ixmZ3TnfwvYxm5jII8r4qTkOCKWoCxq9\nQDWM3aStlTBIFjzOxyRxdcdnZsCQ6gIeT4ivrF86nCA+PJ1m8jrJ3rIYH4N/\nM5YXV2VmRyezk57VtrSR4CXtQRnSNlFSUpJnzARaThSIxyx8eYkLY/px1LCP\nQpQAClFCOMku8rOBj2L91xPNn/q5sD4auRbdXG3ANMDUNmjzdccS7CNtLeVJ\nNFGFRov6lKi6RUZ/GYMEXwTdwACWORlv2mXF9jIQxWfZFwOrVK1q7zhl79Z1\n3jm1RKO9sHyUViYfUrXnzkdV2uEci7O6MavIps1XpeiXfz/sEJgTX8ooXao1\nBGrwKRvILMJxrcqott8B/SEX9ClND4GuXXBlk+xINf1TjtXPgd6dg3ds5i+j\nqdPD1oID+SaAi4RR8Pc/y4F9aXdxp+xhPl1mepTytGM2dzujjF5Te3o7ggTN\neVrGXP+N51EbMUcXWSWtB/EZQFoHcVhgtkfpARtugvIp2mZY2uRU4rfYgx+P\n8Ep1\r\n=iRbv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"7da8a15cddffc97a38ff48783a0ef9f5f0657a27","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2021112822415","@chakra-ui/hooks":"0.0.0-pr-2021112822415","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2021112822415"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2021112822415"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2021112822415_1640729084283_0.5636513478874148","host":"s3://npm-registry-packages"}},"0.0.0-pr-202111299618":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202111299618","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202111299618","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2acadda5f9177a0ba5c4fe65150f75fd79884300","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202111299618.tgz","fileCount":22,"integrity":"sha512-XZI3Xzm9BhD0uiSdOqu5zhR7x1PqNJxTn6MGhrlDhsngrJF1w1Fm8XPwo9uxLZBREgn0Orl3G15700LjlbsxMg==","signatures":[{"sig":"MEUCIDEviU5VOrD74qm2rQMJvLoUaR51ZHyvlryrKuuUMvShAiEAr3O9K+efy1QwQEYDHsHBPTrvaYHbHa4YisYWG2CovB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCUuCRA9TVsSAnZWagAAxbUP/2idYpW4ciIN9vdyHMU8\nqMM51/Ma2y30oGrZhCk4rvcucBcfBqanfOhAobHF5za/dhD2HfCMpLEueuSo\n6AB0ydjHJBDB6/TiEODC6Ka2S1OT9+56VX7+2CcXW4v3tZ0AfDjnoMj/b4SJ\npN7aXDtKB+79zXoYPU5rfePgbeGwkVPkyqQED2WXCeZFLClQL4+Ej62EqMYD\nNGyYdBl2a7yEviS6yx/CZjirsa/VvEb329OG0roCKQ4hbJv8g7HtgR/ELaCl\nqsYIHGDuYqw/YOcu8WClypohYWaZ85EPC2KTMzNqPffEIgaa8hLV5RknwctQ\nrELMwjpEO0dTzp2AcV1Xd+q8Zc0Vd4p1ZDoulsTmfXAKDktXn0XzA/XGj8vJ\np0TFi5ClndBgWXHSMKv7nfDEbSB69m8PL8SgijFx/Tvuxt/IBlF4ynPeClA6\n8vTTaAYP/xFu9GTbNBQc9XWazFPJXSeRJL7IXmmTDSySjSrwV5UQQC19Vu44\noE07NvHjbfq2L+umZ3JrD8houbmPJD/XhVXPiMx2e3v7MHZg862/XuWdDqvL\nO58z/tnX5guqOrsTAzqqOAel9TXxCXqNqurLhS51FRVJzBYfLDPk+Nh7Zmt5\nktKF8l5YP417hcI4QrUTXHudPR1jzSD/PBbxMwU5YOcHVhAslrhmVPZaGYNj\nsBFU\r\n=n0zO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"5de40502baaa57a5b1ae05345eea02cd8c7e53d8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202111299618","@chakra-ui/hooks":"0.0.0-pr-202111299618","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202111299618"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202111299618"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202111299618_1640768813911_0.9720052427591492","host":"s3://npm-registry-packages"}},"0.0.0-pr-202111299647":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202111299647","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202111299647","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"33b4d21ecb90b5dc30cec2f0258354a5f27b075c","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202111299647.tgz","fileCount":22,"integrity":"sha512-abpREHM6QcGFaYA1SPaNOQu+717OP0sO6/UttxFtOfh3mkGquAoNoc1JNnLcgLRgq3kg9QYH6WcjbxkwAyQs+w==","signatures":[{"sig":"MEYCIQCiitQMEKr+sfAbRka5oHdDf69AAa5BmCD7J4S4xIdrHgIhAOwray8XCXKrqsdoonn6orzplrTUmJQexblY7GuKhe0A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCVFCRA9TVsSAnZWagAAcKQP/Ro7mj+XciA5uoO8bWHX\nEa3cCmtj/vHUaeqAwOMzghP1j2Zrt2H8nyi5LFYnKte1qrJsunsiuXnjiq81\n4xFOQr9I5IiZ7osSEGjXiDXK7gOER812c2c5zZZibMPsYVGKUMoRf3dhE9cN\nrNcQnzOtETFdZIxnJ45bqnBPcei3np5Qm+qajGhA/CBraurgrXG96YeYlyKE\nvdjMS06fXb4cVl+rUZ+MFI6iiGJ5lv6cvxcOrDEwLfZKgws8LeV2pqfRG+E8\nsMAAw1yW/18t1Sfe439xFTlOKksqgfxzM7mgrQ0mbBRE4MvGYPTw68Bg1oKB\nuoxRJMB1aMvMjwbLUTlRas37LU/e3YxzDpcgATv+AJBixC7Nq2ltE5Twknn1\nUE06ziLI/mFNejKwQNN02FxTKY0NaIqMKUBqyEM1OyIqkPoHitzQERgNnA7M\nsjA3oXUF4Ih3N3/f/QHSH27P1SgGRRuzZcFscaZADW0LNNSFzk4OKyuxII7+\nn2IggoR5GHo4nT4i7KoGe7KQtZxcoLqoUm4Y1NI0/rLR5xMNXV7zaRL8h6GX\nIpOwSVRWW7ZtiBCxcnCrfgdYQ8uf+r4fiRgn0b5AduBN1GOcAQTIHQL/gkMK\ny113g7EQ4tIfRzhJSCr6y6xBcgignqUsOqLlIq5Z2rqUbB2oPXCG+OzQfZoh\nMb4N\r\n=w+7u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"da42210eadf8b10011fb1a7bf54a3c92dd9010e0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202111299647","@chakra-ui/hooks":"0.0.0-pr-202111299647","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202111299647"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202111299647"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202111299647_1640768837167_0.33558956179405053","host":"s3://npm-registry-packages"}},"0.0.0-dev-202111299720":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202111299720","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202111299720","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"808aeffcd3fddbd6169f12fbec626134bf5fb069","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202111299720.tgz","fileCount":22,"integrity":"sha512-aog2SHjDWEVE63PgJ0sem4Si2gN7bs00kR86ls3cLTHYYBHA0mY5seCzqay4q06qn3tak6O9DiuwmpuJPs2umA==","signatures":[{"sig":"MEYCIQCDlpepXr9G2j8er84ZbAfcqS64uLevriXzb7Z8n85w0QIhALbutgrRQHvmIms7le+nFeZD4x1ucR67209Kt0ZtsqZp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCVrCRA9TVsSAnZWagAAd9oP/1bX4dZtZ0Bh6zNbag6N\nxIy+pkP0y0jaZefQozoyQCaJ1T6CWK25L1xWyTEb+CPnXGKyITlitmJoQ7Fs\nGf1sU4m2uyMllt74s59ORCp3m+zY7YHc0yIf/RHf1U7164bIVoQTU6xb/Iqp\nc3fkVdyLAzu2io/2Q9Q7KaXh3MekiNjVU08iuT1ZbCROtyaku3PECrDmx3/W\nHwK33OUsgd2m6N7gbYWCa8Qt7AnwFZrFpKkAHPPrq5zzwfBl9aHmTK2igQIK\nkXk11qYyf/ezFJdEb3vJ60gOdnbbj3mefsG2Br0JOND5uVUP0kQ5BFLVKa37\nLb+upQgvNVjo9PK0RQugX/Jn0KeRtJZ2CKXU0ftvYzjKl+WI5RjrlogZS4vo\n1XO77toStEcjGNp/sHqem90lCUb+qWqADbDBXY1WjBznIhjSoozJDpxtRG3B\nxbA3iVIeTC340ojLBgpRyuOy7fpLSvN5kiW3kq0djA1f9M9oIL23IIOfsoQK\nn4whPFOAKHxdw1jWUkgrnFMXZpBpO+klr06SdCzim662E5T8S1ItlmKgvqM6\nJrmsHoB9A0gs/8YEs7g8rh/FkNONTgDLTe+mLAf34P/oCmIPrKBx9GPcZiLO\nwJfXttvNoco+NJu+1nUz7YkOxibImSgBYx/3AJash42AqUTiSfsdsqfOGGdI\n2XNF\r\n=pt/R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"5de40502baaa57a5b1ae05345eea02cd8c7e53d8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202111299720","@chakra-ui/hooks":"0.0.0-dev-202111299720","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202111299720"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202111299720"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202111299720_1640768875649_0.1535457914640086","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211129982":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20211129982","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20211129982","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a658b82035b2a2e4fd5cb304d27630f06c79f111","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20211129982.tgz","fileCount":22,"integrity":"sha512-2m8yAMp7Qf7xoSHzqHaJspZdRWPXJCaVG43pELZ6xKGUu4SGKTpVU7YWdzN3pFIfo5cj1OC+7wprHi9sX84oYQ==","signatures":[{"sig":"MEUCIAJOSInLKlP80EkJWSV3xNYXiKoKJysPjT2buKmfCzN/AiEA1DR/pICcLzKDnuhKk/yVBDBXIDhQUSl96ODZp7YhiKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCWUCRA9TVsSAnZWagAAX8QP/1K7nS5Z/llIyFTCT+MU\nuO5Irovq/BleSm3E0Nqs3S532u5N7tS1EQlnuKBe/Jhvz4ckzbEDvXniHKJY\nnAz1LiOJCWblWTqvIiRpNl2n/ARfUuyO6BERSR5MR6u4VDQrx6CCaEcVeNk3\nuSv9Y2FBAOEuZ4xCMUM2BI92iNzIvBOvnFcc/4f0VRSRAhTyZP6xl3uNjiI5\nRtM8GM28RjMoJPqCI1hGqz4NcetxbxEsn5UHWA60FnL6V0n/LfAtDF+v1ZYK\n+8Umvc3tL+klmedZgbAsX0OtUT0R/k5K19WNgc3JLCfAOsmX+0fghMasf7KY\nCywwFzHitM8qPLr7e2Dnt4+t9vOI0fhSqPPo/bfJTSZ7PEQwRC+aTpUTKsjE\n08U2Nu1DioMIc5rMwjqywQe+bVpWZ4pWJyhYvl1UFtFTod0XDF/yqd+wKomg\nS7iH7zM64AwN/48QTQnfsGWkrNNE7bwUUKHkYKB83I8e0P4c8YIj6cyIlxrX\n4IjJ+YgmqWrJuL+oKl+ByIeR+/AkybnCzLjUnJYhbyqzgM6A7cPN5V8pveFO\nmt1veorECul+52OTKYMMw3GD4OImH+jlfTNsBASIb/LyDD3EP1a69EmyW1kc\nSn0oCJA2jXn8z/uKiDdq3OI+8CnAWCR429wwq/MuwWZaBwimZ04S7krhZlPj\noeDu\r\n=KOO6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"5ac174aa4b53c0ff84d8cee4a1436f48deba0925","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20211129982","@chakra-ui/hooks":"0.0.0-dev-20211129982","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20211129982"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20211129982"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20211129982_1640768915804_0.6460761262342072","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112991213":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2021112991213","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2021112991213","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"da64cd84e9a1d61cb39ae795b3b097cf8ffef262","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2021112991213.tgz","fileCount":22,"integrity":"sha512-XKH6ZGhrvgykpxwX42FBSA95RBbvDCHDRb+97Ibfkkb/m+kOFfJpSV5H2waHzfCUSpu1LEVHikM+lw/gFTIvkQ==","signatures":[{"sig":"MEYCIQDtYJ7czdAFxfIhfPH9yNbg6m4aKvLS9vwP1UN5ii4g0wIhAKUuFhFyzg+Z+CHbTs5efdmqrW9AgsZ6bbrbqXJ4AzFM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCaPCRA9TVsSAnZWagAArQ0P/20ksuSzrL1QKw0AMiQd\ndGWeJ5VFvyRIiOHcILevuHk0c6Yk8ePkDJvNgV1esAwmcNKeLRqn+ZPzlhah\nfhQMQam3KLCIKsquRxRYH/qQmLZX6g/OTFKe/SctieHiDHL9vjKit1sqfZ97\npeoLhEERQ9tB7nDr5mQ/q8DSVDPHjm/2RLW+krn2keyJpFRyfXQDLT66jKz7\ni2L04vWYDy6gVvohTr+XF3xDHP8zr10Iv/B6C97vGpVuavYweG4vH/PRh691\nDiMOUvjAH7Z+vDpDrW/NF4z1hZ3jFuRa1867EuzEzcXe/ez8CFKk1l/5wXcq\n1ccMS3P8+27+X5p7CfLgun553ambFB7z/GWeojuRoAVFcsXZJ7qkOdYxUnJR\nqvTzR8mMQ78D3VcDSeqCzR/7+o0yaohYIy/5kgdIpbAiaL1xYAV9DL1D4m6q\nL2wgqIoohCSrWCy0CF7Pvd8IIJRa6CbusoGmS+OHfies+TdrUqQ7hXr+XblQ\niatDa4Npsjlz+Rqxubnvm5Bbc5Y+SZ6Qg6EanDxVFrWjEa5Buj81DteJsQ5z\npvQ0aOx4PMR1h00fPxt6ZUYhym/QpY79eBkSKl/9Ym4ZCzePr0H+goAQz2BO\nRpoU1pYXwippZSdwhf8OqzgOYGeFaB60g24sv7eRL/kKj7JOJzw4P4n8JPUF\nq5ZF\r\n=gTEd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"703cb5783ee6e0ede26cf366c1f063111c9adcaa","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2021112991213","@chakra-ui/hooks":"0.0.0-pr-2021112991213","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2021112991213"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2021112991213"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2021112991213_1640769167452_0.07653243629347384","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021112991233":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2021112991233","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2021112991233","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b2520b23bcc72ebe7bb6832c7f73f88a3440dd06","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2021112991233.tgz","fileCount":22,"integrity":"sha512-JHrOC/JEup1kn4fCEmrCpB1vxSoJPcTyufotp43XfaHNz9zwQ/EimiaxvJN3ViHdJr6nQgcOVEYyGi2XEldTqQ==","signatures":[{"sig":"MEQCIG+id0ZpSlwuPDaslo/yh0gIBeflgquoGz547cG7cj/HAiAk0MLMCFTd9hUOqANfEmAwh+0dYYOof183FoI9UJeI6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCajCRA9TVsSAnZWagAAnVIQAIiBiKb8wpX+5MVZV3TK\nunTOmHjupxtOJWf88eaILrPekogmu3tdoJnOxKbtcXXw35+CMgiaCRrKDJ+R\nSbLL89EpBStvjbvuzPZw7LM5sS0AfcXq6+C5fLYOC2bHrn/69pwpSb9HU3Ev\nh77Namf8j60GIwuk7czZIalX+CfbuIyDboZ4TIFgtQiRPqO+upe0oc8Ix9GG\ndzBxdz+FoweMVxtb2R0XfBz/MHoJRKzkn8OUn899vZzEzeohuEca7V/4QCu3\nAaTzsMsQvhgUULZdtpD3IeBxS9XVPsT4+w3E1H21PrCRRpXCZXknh3jZmfVy\nALKaX5MEZt1rPWeoYbIDeq+GTkX0iTRrvBtS8Kke4RjWdcwktiMQVG/3vUbV\n5mfu7S5iMtjNFA6OSUnnEc3vIxbqM1NqnjWns57Na0O9/Kf670q7w7qPVdp4\nKPX+i8rL1DrLZ+TzjpFeyoZQqpZZa6S54g+80pK7SbftpGSuJwsw4+V5rND6\nyX0Rol9/ADqThDN62LdHV8TAzc8ky+Db8xznmfPTEVu1VbB/dxzcQS9a3/KB\nbAt8eZtaf1o67WheaZCeUJAafoch+3FZ3IXGqebYHPKBRUdJZvtBQNzbkPtE\n26S6mX5XvYyHzZHyEMyJ3MyLr0m/v5bM+YcZgz5Jznj888gAW6F3woParVKv\nXnUt\r\n=LfEA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"703cb5783ee6e0ede26cf366c1f063111c9adcaa","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2021112991233","@chakra-ui/hooks":"0.0.0-dev-2021112991233","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2021112991233"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2021112991233"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2021112991233_1640769187248_0.22094090945776856","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220114234":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20220114234","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20220114234","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2ea4193b4458b72c8423fea4a4e898f5690c0729","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20220114234.tgz","fileCount":22,"integrity":"sha512-f8v80TNXQW+7+Q5nqVLuDe+rd1f1DLrCdfoBX/k/9JnmdozofG/iACbUU4V4+f2/GLTz9gWwaZSF5nhJgCijoQ==","signatures":[{"sig":"MEUCIQDz5olEs4gm3O8b67E69eoPAg6p+GmmQRzTAL0ZoJUcWAIgRI2dbvB2Kpu8OR/tfTv3nnl9X8HxBP1njdVT9C82v4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhz7GpCRA9TVsSAnZWagAA4vEP/jJHMOV074YR1ui72Bwz\nCk6tkg9bVNC6Lx9GuVRaVrwHhySOGGjNLsmvYHYos/OhXdp9s9ofUi/c7lhB\niCEey60WdmLEhw/JzM8Vb/WPw2TFxt3AX6zlIdJuVQx0mwiYJGJYO3Yv4xQv\nGAnKjil4X6rdaC3xLp1I3Tm0QND3c3ArEhDLRy3fyib1nS9AkPvl7PXwJonu\nH020IDmqopCA0J5O+13gB4nhrIzbvDSzFBSCqmorKSoAGd+kDSTYlceN1TFj\nDhAAGfBcss3MnaDaLCEBfRorL8O68/N6s62+r1XRVEhuwnWSJudZ+oSfoOOz\n8djbudr6jr/XHK8p6aAHm721tqRb2ODg2j+7CEDkb3DMKpCW/DbjkaekbuNL\nIXtXuWd5D/D6fceHhhQ2wHQlDE1t7/mE6ESzQ7ctaAbmDM/16PgV5dukE6Lu\nIkp2y1MqwenzuiiHpRusXS3ejn1heTiySIxxJ2FGb7qXLczNmxQEkjZUmo9Q\n0Pv/0espM4a1ojhFeJCPbyQb/48DqPMZ5iLjbbcqHKdayp0GvT2iZ28NDnXV\nUeVIuwyzDLxu5G9veUxREqvxHit0PFN8zShb/zp6gy6yQWKHQKogCOKhSbNg\nCFFIIhbvDJ9yILqNnnzL0ZAr/misGAD+diYoxJciLRDI8lwBMI2CeA16v/Ry\nCNP+\r\n=QvEP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"503ba4b41661a704e0a2b9e115af33a71baa8b39","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220114234","@chakra-ui/hooks":"0.0.0-dev-20220114234","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220114234"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220114234"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20220114234_1641001385307_0.23685914765682936","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220114728":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20220114728","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20220114728","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4d21e7dac68f1d9be327dc4949e43c1240771b9b","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20220114728.tgz","fileCount":22,"integrity":"sha512-DoSsLNbNOr6qGr9QsBUUodQpW/GbuphwHYjV+RY5dOEYMd5allzuMueZymh/chE0mvS0OQuJyyDSehLS587Xzg==","signatures":[{"sig":"MEUCIQDa8vd03kgwfxNRSvRXEiTzJh1BMQ7JN0zpfS/kqyRjFgIgAM4bpSnqmQFouf/ZfLyn8xBlDY2tSSbUNqWe8FbTUyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhz7LTCRA9TVsSAnZWagAAOkwQAIo/pEuaskXvttmuHg8M\nktYgJ/nh055ez/8tQ+MLNlTkiVGIrLGZCeQTNkCS2vQW8E1Jnye3CMUldEs2\n3qrheHVTgYvApbDUi5scSFVQVfiH7XZkEBVad8Qo7kEN1gSBPOxUrbA6wnpF\nz9BPeU7FFFND5MvGAz+/9IbGxw19TLTDI/Fy3wUZzXr5lM6yngp4LpDinsB1\nAVKJjDwSzEeMXfYvrdDYnlacVXx1wr1CUkA4/c28nRuP8pKJVG3Dz6nbjIQV\n5OFNSfC9rycDZIUzVW/G9GXZi64OO2DzJTUsuDwsYE9n1tLSqCcvEohVMwVw\nsfEJSF69E6QcUr9MZDemd8y5SGtffhv/r24Nc53NEiwJqbCQcFGSHgqVvAjj\n9sdtvNRjdODakg5K6YnwTtTmyl7y6sX7gIQKBf+M30vMFPQyhkwcxYJXYX88\nuufZCJr/Re6mqD3C+P9Kam4qJ9J//h6Zev5nGNxdkQdq+BQW41sRnYfJaMK6\nAuaA/JR49rbYoKT4DWVRmRF7f13SH1lURWPm/rxvgpAhGDGJHZ0NNN+6DXn5\nd76WInK3xnzMI81bDuVy87aVdHjfsJQjvJEak9PY+qAbcrGDih6b2LXfypDb\np9/+TwKH+NqEBsNtxE/XttM+nKZWw//ImDVZw2vKbOO1xF1IoyNI4xmTlACD\nsGuF\r\n=6/1B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"cbb0f902b4b516e6a1079112f9e97fe10fadf810","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220114728","@chakra-ui/hooks":"0.0.0-dev-20220114728","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220114728"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220114728"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20220114728_1641001683130_0.7013236085645531","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201134936":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202201134936","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202201134936","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4cb7f03aafc549fd86d4c3114df033f6bb1b5d75","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202201134936.tgz","fileCount":22,"integrity":"sha512-0uw/0LyZO4UM0qxmLsZutWBl2Zz9caKNbGIJCHA787vYg79O9YjamRVGDpWZemQ+nULKQUIEPFKGh7k1dH1ElA==","signatures":[{"sig":"MEYCIQDTH7KZ305Kd7uszgHwgbEIbPOJ7z7zMrs9pA4mU60XlAIhAIrQjbU/WLO+0jfLVzvhKq7Cgb/tUi0QKgSfUQKNGM8d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0FwRCRA9TVsSAnZWagAAj34P/3mOF6k+NVUViag6EWmQ\nC8Ys4WVhv23RikFp+ip9K2oZXuKghg/ud9xiH6vzZpbqsOkdQ1XbA1li/MK5\ny7Ek9b/4dLvVR94fSI4hRex3GqHYgZaIxgPTAvj5zLfpzMew/0YxSNJtiBp2\nD80KmtkPK/GoJvjn5gIY53BcZmMhCE+305tMjRDJ/sKikHH5f/dW5ZH0zGeU\nqMMn35eEmTgztMMdbr7lDk7tfAG5i+qFl/V2tnSllCVHG6FSj8KfiTefZNDJ\nW6o02j9W9Fz7Lxo71HsnCal02tXyA05uGgbTtEGDTQrzWhFzVrYQSIcIqTIW\ntVfB1BWxOhDeZ48zsYddBk2+hvAMvxEc6MmfSC9MmPqVERDJONMdjdtLnEXo\nMqcbCuFkvu69eC1w+4xuLNItYksG4c9E0/+aZagilWFlpllyv+wN1u6BQ+/n\n6Gw5ubA7C81O5cECZBZ7LNYPtoqNx9RY3zNtH5Sk8eAWQ0SFwm+y8Y5Bsu7R\neJfATD8rCfvItRqI8nuQp0KlcN1tifcwHUGsLQAJyUMgNyU55+F7gv1jbhU2\ni6E9uM37l2sMk8fYjq+ZbmBVXYqxd63dtV6ZFxEHh6Xdv5tdFbeARDuDtCYr\nbD8Eupeo6PjBYLj4xMqAPZEXvtlmbcL27NheEwgblP5P8Jmxd2NY+top32W7\nJFaJ\r\n=kAJ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"2727b79201b1897694d588db94985ad9fc8ba1f8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202201134936","@chakra-ui/hooks":"0.0.0-dev-202201134936","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202201134936"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202201134936"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202201134936_1641045009690_0.6490233893519854","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220281628":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20220281628","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20220281628","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a8807a2328f697ac165ec71471882d72adf72634","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20220281628.tgz","fileCount":22,"integrity":"sha512-JjyeSBaDk2dTyU+hQYJRuXGNKi4lWLHLt4FCYAXWqleVwO1q3Xr2zQVBRUZk2j3nV9Dqo03arTZA7x51fEE8FA==","signatures":[{"sig":"MEUCIBvUfa1yT3O+JS8vGno2QZTaA6LjZBKr0raijxGZPum7AiEAotjNSL/BoYe3yJU0Xymor+W3HROgI9bxcyUzgH6VGLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0V99CRA9TVsSAnZWagAAsLMQAIOp72huIRs02WItfolM\n3otBdq/RxRgEAHI8YghOZYT/ifKbnRr0e6vX2IInaYIX/DrLIyfQrvFff5hU\nHKTRWdCRPTmvXat8ym1lLw8Ap3LSuFFCo04lpSPsHcyaMVm5es3RmJXDVtPj\nZac3SjnjES1DXfMO7cfqbFPQ739mAe4qsYLPz/wndBa365RAZnbH++AAWiWE\nI+TFoRiOlUxdX5E51UKp28rpxfmhHJDn5xTudCK34+ZwMBC9o+MAutNs6Swr\n/2Am/AddGxu0q1YvYjscuw8P5Hl8nu1ojjXQ8/ToKvuu93Uh7UMpACBIR34A\n4tDY8vXjY/CZeBM6+kGqiC2iNrF+DtQVvQ9JVun0PxOl9PB+zZGcEgbReJY3\nSp6hZb5/yUPORy3DH7pycuCZJz+rNk7YAI31nP4w7rf5EuJtlh0L67mwqo9U\nJsWNQYMtBx8wgaujDc1anJVPfXjXjsquDmPDqNPnGKkxFiuouqa6JtoqX1ko\nP9R5DOph20PL6XAriE+/YRYFeBtGiz/OCE1K4hpXK/Er1SL4IXx6R1j4ucvh\nOics4JCZXiBU2WRFgtGuR4a2BexxOXaaagTYsg1UDQs2L3t+3qBHujcGUwOv\n4TrSolXYLaPA3ZSWGqq+EDQlaT4yu8Y5sYjJGp9kwPohut1W6+47/AIoEwEV\nDcUm\r\n=rb8u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"a9dde641ee8d65b51a03845f8210f6fe97148c6b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220281628","@chakra-ui/hooks":"0.0.0-dev-20220281628","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220281628"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220281628"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20220281628_1641111421700_0.32746068680872775","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220282224":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20220282224","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20220282224","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3c1c48354b2af5ed95af017dc5b267841febb752","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20220282224.tgz","fileCount":22,"integrity":"sha512-JOnCThUSqbwtPAmZ9vqI7l1HMBjfnJ5i/LJUp2fk6A3TiLSJMTNRGE5o6rCI6rMNAsMXuj7mQCFjNQJFHQRCMQ==","signatures":[{"sig":"MEYCIQCK6IoMaTA6yKL5PerdKGuF5qRA2oH7mRNRTrTGc5ImLgIhAK/bqVsgjKpL/YzRDK0E74O32WL6L5Ms37vTGgoMBkNG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WDfCRA9TVsSAnZWagAAVLUQAKMESA9rEOyfUAeLFuTz\nvjgeRH6bLoDIl45sxjQTmhswO50kcDmQ5p76hy1qVdYcD9RFXFYGPKgcNQBK\nkHm9uOsZOxgyO2vwnLZfSuX6/9uQlAmFV++njGAEIzc7zYFd8tUdrMiWx9kn\nitPSdsFJ6ur0g6ejsE1w2iEMc8xRGkEFT9uZZi2PcaqofRJ1c3RrFosknphZ\nUQ7PO/QNmItU9dvJJUOS36lgZGEJirAwZbakHUw8LtchPFZdcHMTsKEjav8N\nrh3gvg6X079xosQAGCcnD3RIx2+b4X3rxRA+WaN82Ym7qGeMU+z0GxsUpu8M\npLisM+Y24LGIA+9VkD3/Ke5B7/4HgYGGNDcuTie/syb3zzEfy2EbRP4roRs+\nI9Zo6UzYIw72n7xyNbP6HKbZvphLmmNp5a4G22UEmW2bV257/K1g7Hg6dvgO\nELyf4YVYRpgrm255QBvqGoQ9ryXQIPfROJh1odFpfIWOacUPQeowYWlz5cDb\nEbqag4M45mvfxQVi9iMCc4w/idVoOe/OBBdqL4eJwsXaPAPNYGecl3zLcjjA\nTvIo6Rp/HKEMbFg0moARqsMB0g/gBA+bzsSKqNa1XiuAr/41TFuYXrNWRqzs\n9o+bSNJRuvogSnu6TpcM9R5bQY4QWHHik2nHHjZLh350f9ZCg1FXGUIpjzXZ\n6OCK\r\n=KtlV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"05b58576040bb66c8ca5daf1a42e31500e33860e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220282224","@chakra-ui/hooks":"0.0.0-dev-20220282224","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220282224"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220282224"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20220282224_1641111775531_0.2654417742401174","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022028241":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022028241","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022028241","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5d17fcfef10381c55d6f1afbd7c2fa3640079fdf","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022028241.tgz","fileCount":22,"integrity":"sha512-sidx8AOjseownoAjOtBpu3DrIGOjtUa26aiZsQvWX6DOiF4W/3Gqr7S2UF5ikzU3tQXS/Tc9jdIU6hCxAzm/cA==","signatures":[{"sig":"MEUCIC9oSlDWU+C2Hn9K+IvjUv/G2C6+bAbrmsOtRjbI+MG0AiEAjM52EEyE5NGrtFrVXmEMZfEB9azoajqtXS7dDzuTDM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WE9CRA9TVsSAnZWagAAKGMP/ispidlT/VSrgGNbzysY\nH6eEK+etzWZa4XWY+A34+moJ+7YP4GOaJnQrQUBXoZ93kQKr/OPKfslCIIyW\n1RLrzr8J43yoZ7nn7eepFgISIXm1pRzZgUIT3DnmBDYCvXbhZmdW1MhyWbZL\nRKD1/lJJuAMsi+pPtNHr/JkeavURmVdn1rbFxXN1Wnv+dJ8AbXZQyEoYtCvA\nXXo51PQCNcUd8u8wl7JVI0LcL6kP5fui+xt26vT69Rnrt3mqa8Zl0JSYj9NO\nf64AT5guu9czY96lYMpfPPdxb4mzXJ2Zx/rEpvdDHAAGkHq6/uwLFE0DYvIy\nPKdPi7lBlNr8ZrtXn5M/xTMRERqHdZJlCHpmzHE4wMcY2moMIPuFxWA4GmRF\n6EE68KrqfnegKihqfibnJtRvw5/JuI7HN/VoiAiT3g8OC1P0G0icTSd39ST4\neHB+Ii4XcAFXh9MJKWMVbyZKsSshxppbqgLG6E9BVEAmeacQl4dIZZWrWW5h\n+uiUbh5uxDMUGdu+nUs7OrVXvxijctk1fnvbH2DJpceFn8525DHlwqV7ucvq\nTr/hdagD+HS4PrchlTDjo2hp2XPUJWR7grItB3UN2NtGVwmDqxkdM41gZKVu\nkBXwlrBkETRdQ07/mBi1tFOMrL1BNJQEoWsW/fj24IVq5RrOv5Ruww9bE733\nsZpt\r\n=1Qp6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"183e4381a3705071bc42b4bd6eaca76d5feb4bf1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022028241","@chakra-ui/hooks":"0.0.0-pr-2022028241","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022028241"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022028241"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022028241_1641111868843_0.5496555182288665","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022028277":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022028277","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022028277","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ca2603bccaf051b1716a0174582a4a6711cc8cb6","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022028277.tgz","fileCount":22,"integrity":"sha512-sDpJJ7N1+A4/qccm2CUbx9AZ2wYB+455fhXriMkXJvtQm7QZ46rGU8bDJ7kN1fbWT/TNKwQGWQJPg2wjCrzJtA==","signatures":[{"sig":"MEUCIQDTBn8MGhyn//UaSbRMRN8FIgG6RpULrj1W7/SQZG6KpQIgXbru++ye31wZoNf1DxgoNF7sgCqL18/jHuLLytMeWzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WH3CRA9TVsSAnZWagAAPhgP/0BVtpSesV+P7C6wdPt2\nRf9M2TC2Ag4m8qsE5VsNEKbOMvCiGiJHaNA6CmjZY+6kw0aUJeAd20cDbhfK\nZPYsquxt/ehREMph71lgG6A2clBn4snPzlx6cRZA+SvrFMV61Xv9BwrpqFsr\no6HiaUoiIORiKLKeKFzQjqfVZjSE02pv9a+BMNeq8f9gRsMAk9llZoj0sBV0\noOdPEImlrs5ajECHev17wh7zl0r2tANfrtTTQIjH8RsW0D6dveIJ5QnwiIbW\nboxTPzYI7s2hxNmlz0KA/wBJnanMPM1YU7ySoJVjjquK9IwEKmD1Ou3cHvUW\ndXaW8M50WiCv4UdAu0VRoRz38FDJfgUVOS7SymWLmOxeKpVWt3hsb5Sc1MBu\n2K3AHt1HM3p/HZv7QpfLWQAjCRwTSMHHJNNFWCYM5Iltd7j8HW0Wq8cGuxA1\nGCyHw0a1VioLVL9L4FNNAYk/C0J5ZFEa2tPIdtrjqFRUzMirB4WAjhPtS2ls\nWr81cG+4dNMnPdkF+jCzxjR0MtGWQZpZ1GmFsjf5zcwxEqctzTwxfPWp3gzC\nM+Jf2jsvZZo3mlPlnZBxiAnGTQ7vl63Tq45LNqE+oDghTqiZBq18/lYgYP+x\nFIy32LyvPXQrZCxgxznkZuhsSqM7SyooTIdrn/bKcmZu4pvkCoyA33ua+Vlg\nihtl\r\n=CgWD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"a38649394bcc95d4c0207491394b0cd2a0c64b1e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022028277","@chakra-ui/hooks":"0.0.0-pr-2022028277","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022028277"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022028277"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022028277_1641112055700_0.4232623549595973","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022028387":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022028387","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022028387","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ab15ae6f4d8a09dbd8e01b1920a4d30d701d7e6f","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022028387.tgz","fileCount":22,"integrity":"sha512-jwzX0Nz4c52uxz4ERA6nf5nnIuZy6vMRfelcF1DCBLFe7NRrM7b2zu26M0442u9Fa7vcgZn+LPgwwnEdcvBzYQ==","signatures":[{"sig":"MEYCIQDck13OpuJZtGTonLMfTIXb3C4lF0aQ+H3fQpLw+hdv5gIhANCM+EvSwrxgLpX2BmMcM6qous7VrqYLFkwRUsW/hRGv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WSTCRA9TVsSAnZWagAAH68P+gOudLSC0TDDCOOZRsPW\nOszIAMP4Fnwy2ICqw1GDVAS+NPE2s9zZJnroU0R/Vufmx55a68AEWYuL4eua\nmLqDk0KC4BFJXBvhi0SxORpcWmlyVh5JcgGdXiAo6fW9Ga9kRs5nwXe9Kcn+\nxoQ1hALgsyPxJoxJxSXG5dsCm2gc7WEuIujDxu3s6oi9W0qF6u7qOZTw5HvX\nktDhG1q7tBFwWyyAlkYBjyhowTfbQmvooWyxIl+MJidaf8Xju3QUMRCyPZnQ\nWT/HJL9yLOvIuSrHI8G/SK6AjP2DxADYPEqFNRWScxiIZpVpv47zYUOtV2Ln\nKuo0zm4ldbtVZw0bVghLzOgZyRt4IS09+woJ/amyrVNySMhJDu2FVWb+rHY+\nwqGX25wwJZ17M1jXbT4229DpaMRLwSCW0L4OQUbzHAHxukq8LhiwO9ueYmkf\nBCKIP9GQVWXQms9WlgvzXAc+FaTTXQ1ORq6mDiWhB6i+Xe0Gn16e/y+wKL7D\nJCMfwPN3fl+gx5fthlc0quHPqMMkQA8EvrnoeOdPoy2hS0yFvm/8BKbtjZr+\n9R65K0y6qrwadDkegK7P+GF/xRF5veE90qjJY0e3Q0f+fsFMJR0KVHWw6qvQ\n29MOsQTCyUUlC1MoJO+H1ZEagidKaRc9lKYKZcYNU1q6hYhV3E+mqcb2CgRX\nmGRz\r\n=QsYF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"fa474bea3dcbdd4bbf2a26925f938d6e75a50c6d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022028387","@chakra-ui/hooks":"0.0.0-dev-2022028387","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022028387"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022028387"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022028387_1641112723772_0.3079774012044836","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022028457":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022028457","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022028457","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"59987dab72ec410eac482b7801e56f8f9008dba1","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022028457.tgz","fileCount":22,"integrity":"sha512-r9UvjiDJjzpFnk1tkhNaa6/7kCdKsK0Gdk0Qa+raZHzreTmuAbIm1xcrcDxncvtaB9ozcrdoHmIo/FCRWetmkg==","signatures":[{"sig":"MEUCIQC1mEx+C4EnuVbSWcfEDSrbikoKbFtzQ8ET73576CRLzwIgKSNpmm07xgJE/ErO+/VGGJp+IwrOMphih7YKqmtuFI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WYuCRA9TVsSAnZWagAAFRUP/2IP+OanyxfS+f0Sg64s\nyEhAvki51AdwaLx8vb7UoU9SA7rPnfcacMM3wUJyEfaB1zUjjZpGL2LhMGsJ\nOXs27lY8sP+tZa/tL2QfUn4tOJT8l779ExVxig8z/soap1PKHOwdl/4huc4N\nkgUoGgEjEY6kD9vsR97urfy1Q9qpsKNymVS4ZRflXMhm1IaIxBs9mIsqDgRo\n4IXCrqgZBcZSTVYcC4e8AS7QprAs9FLzG7OM/K9EN4yCjEtDYFynR7cU0TtG\n8K5q4aBY3WhPw9Yj6I/3e044fv8ukV3woOJhcaNSOVZrmUV6as7X3LDt5fNp\nBNGWFsHStGgGmlJ0P3CD4kMGgQsRgBiZavETRbSOmR8FR/W7eRpRe9vYvj9O\nqnB5388XSKphltOkHmKKFbv0yGS5wlFweHupSntzdcYZo6lnEVBXu5ZCOBRv\nwL7IPpffKeqVAvT94/oN8sBSi99eKHLL2pUHkKPRx1l7p11Q/J2c16SVsDj2\nxxub4wL/K+w/Xe0pjqDeNVfB9EClMX79ZiGIL2qWQpTCxX+5211lR8vsuYdR\nQ2mS5wzxee0uQbCIRE364SGJglNET4AlWp0qizLdFzqea2WOjcvNeDX4bCaJ\n9KsjTive0V1hI6GqTj+UcGOx6Qc8iLqX2GJB8+LN8J6FRvHOBxi7mdw0+xH2\nogsI\r\n=emdZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"acd26afb49166a1a22e150d1e732f082e794da5f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022028457","@chakra-ui/hooks":"0.0.0-dev-2022028457","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022028457"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022028457"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022028457_1641113134370_0.3299303296834959","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220284534":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20220284534","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20220284534","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"af39363b9899e53be6750ac8b7e889693609c372","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20220284534.tgz","fileCount":22,"integrity":"sha512-2mGK69o8zOqgqNZkNZJhOiWyWjtzIcqEyrsh4xohhqefgtsv7c7kUet7Wa4ee0zzmq2T0QI6wWgkbzezATM7sA==","signatures":[{"sig":"MEQCIF6+phrdxiaSdxZZBR+NyF4MxmGtn/ty5svuFVbXGx/sAiBEYDzp+ArVqo3zX9ycNwhU08KULkB3/tdS8eC+giJiqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WZNCRA9TVsSAnZWagAAm+wP/jvI7qYMr/lssqYw0d6d\nAWgvV8OZqNj6v92eAkzs8TOzaQt1XPsYhLnHGwmRk/Bckw+PmGfIBVTd6A2a\n9ATp3JHo+3o922MFtQwYy6TrAzftnKyKkA/MQHrXPNjPQh5yfbJwh4o2Ndty\nmXAhzJrLNInXqVvDIluyAGeSyIjMOISTnHNOejz7gvpKPjb+r48BIgfNYtQq\nvZSYG1OnGIuKX38OkywQBxYea9gLhUgcV+jz+/GqkJKYYdtHHUytdScJQz5F\nopR5WMJe22WOqx6xCoqE0fYsak+TFSrlBTPD8rkhgxmI+XmBPs5rKQn58uht\n1PRiD8JpNlUlKHJj5euzBjrT1ZrpF/5prHN464eLQYwYGSYfiGzMuHCdF4E6\nuIDRp7q9xK5QcX8yUT8oz5PRsrDf4ogcGlZcIV62RiQEWgn46v8FRmRXa+dJ\nbV2ZvF7WQUkxRhxwLXceRpki91Sz9h0HAwgCh/vbbcqJP/fDyuFcfCWFEUtE\nb3x2abQHrJrUAo9kxmOg7uXixhSF1VUPPhGqbjQYfYjCFUoG7DamX7unAelg\nxyFMVzzYMxSAf6YwZwam36qiyyyLMkyGQnMKzc5RK8PWiqL7sFYydouhziWO\n4v00t/MoRqHn+1FVKboTytFSb7HmfMCD26Ww5ngLY1ups8hTncVyc45vmuX0\nZa84\r\n=J/HY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"acd26afb49166a1a22e150d1e732f082e794da5f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220284534","@chakra-ui/hooks":"0.0.0-pr-20220284534","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220284534"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220284534"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20220284534_1641113164896_0.6769742537031795","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022028579":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022028579","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022028579","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a2bdfc8ef91b50425216747a6b4d5efc758f3ec6","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022028579.tgz","fileCount":22,"integrity":"sha512-Y4KFNsesswerWG7koClIB9juVxRP0ogXoZFKJ26qroGwB4u+dqAhC4+oxEODqiBt1FtsOInjEjpo7spsTYIhbA==","signatures":[{"sig":"MEUCIQDLHF6SAebp+TZxQIFY3v/51Soc9KmvI09sSXFKQilEWgIgKgLonquuhyaYrh65zxuORD/xyhBbkCRX852d8XoxZ10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WkGCRA9TVsSAnZWagAAodcP/jQYNXdE8R1yJndQiFWB\nHil20HFvbZywJW61XB9lPQgoFlGJSy+WWno/TJ7gtXKYfCtk/GtXi7PorCiQ\nytohujwRN7Qvb91mjY1/7mAmVWTZhwvTX4veuEQdAu+4FvyG+0GdXX8TYho7\nd6Kq1ZLmjg9M42HnbedwmmZB8eYRzPJx9YSYIMh1bc+6e2wmfLxb1kHXMP7C\nnwsLj937SdfruDmT/U5C8RtWrg0xCvTgJ8ipdkx4O/J0hG1QaU+O10YGdW9/\ncWhNndNWKosL/3EwGDBvJPJ+Y8fbAl4mH8RhlIc6is930bNAzkWFnMEz8t3o\nkraUa35eW/US3y4OLE5pYnadnxf1nTS7xIb7hHsIDO3T6ieQqKZPkrupTM4b\nwVly1oRmYDQ20pQGeAR6GUywNtvohwm08mbJr62JxLn4wsblckDc5uCEmCsr\nWAinXn3wMUyXnWGEVGLwjLyRn6PprQnJ3ElmmLkMv0S95A2Z41/a4wYOLMgW\nXULR9n9hDXiRd4qSB8ASy1KEl8sHOGmX/zcuPNlQxAhxpJpn0QSAGJTdbiCJ\n7v5IhB+Dx7gOkt85PJJ+F+ObUt2Cke8KcA2OqsXOFDh158Aaew+oypidCJx9\nXIByUNRA6yjt/tQer44xePDnl7fq5sIsF6dHkSY9KDWEE/89gBvDlCN7I28N\nvUtD\r\n=UsWQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"bad1953306d693dc6bd1b559adf594cf02a3b8e5","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022028579","@chakra-ui/hooks":"0.0.0-dev-2022028579","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022028579"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022028579"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022028579_1641113862239_0.405054943091397","host":"s3://npm-registry-packages"}},"0.0.0-pr-202203225541":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202203225541","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202203225541","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c2fcb76ca8690b22cdea613b8f101804035bfb38","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202203225541.tgz","fileCount":22,"integrity":"sha512-DOlcSqj1fQOp1AhJjnal82dWivST0qiDAbWa43NBuvBUScuGzOfVoe2NJZNUgpMrnFWaOGMh3gzcA79mM/eZBw==","signatures":[{"sig":"MEQCIBAC+5fXa4j+vX1Fu4fvvjH1RDBH0K0uOhes3RkfTM6MAiBiHlLtfd+xGEexltMHcvnN5GM3OAXuC6o8V0cOMn3UJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh038RCRA9TVsSAnZWagAARIYP/R15XeGSrjW8OU65pvWd\nDH+ZArwSHbFf++uRlgnRvvVXq9oUd5r81f35XZ8HEp7oBH+ipFyIVtKmCJhw\n2WcWbbR269vn0olyVDxrVQOfrNSHHAt1LXCVyxObfQZi44aWkRTjNzWgISJa\nmCo3BM52a10fVkkdga8VB9htDHePU16EoPEZqAKMoghraQiXT1RMcmRUnx4h\nV5e8QtHneru/2dwUxLogTXeLquHelO+gRtHOazPMhPiHXhgVJG3OagrtMLLQ\nQaZy7f4Hv3AL11202jOkOo234ZNznIWnx3uQUb1SNhT+P1zX8L6tFZkuYr9g\nKJr0DHQzTIsRyWbi5Wxqe1+oPBmd9PfpesbadJWO/jfG/VcTSAQXg3oijQoe\nyL1v2X/cH6QqQ1MlK+LMMYfY6fkdwxQW6+sP8JbSxcAQ0pnYSkOwyAg72kkF\nmVxSKQquwAXQ6L6w1g6RbHf6Wj8qM2r0qWFujer2uQT+8psjfGrzYMvmoj/h\ncZk1K+F49WmWIQ6VQ2XKAUQO3+XIs66W6SoP9oEdQ7t3iBlfqgbBv2bZH0Y6\nOjiAxcBxhSpravVca684Lb14R2EN13lYm4/PNzRZEkTSzdNnF1ZBAF+RcTgw\n98oJwAtRXH109MMxJhdaewW/v7oYgO4Ac8YDJbnJ2vksGaYQpvp0HWb2bZtO\nhA9C\r\n=pKhW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"39a343661cfec6c7fa0d53c9298bd287c89a610d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202203225541","@chakra-ui/hooks":"0.0.0-pr-202203225541","@chakra-ui/utils":"0.0.0-pr-202203225541","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202203225541"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202203225541"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202203225541_1641250577038_0.6266699287827919","host":"s3://npm-registry-packages"}},"0.0.0-pr-202203231241":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202203231241","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202203231241","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cfc08582e9181d1eead8a82fcb368b243623a3e6","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202203231241.tgz","fileCount":22,"integrity":"sha512-mQi8wcL4+3FQ5JvhvLzKtmewKKydZ26mrCa3LZKsjsf24cQI9zb/75/hhj9ms3EwJc9SfBLLbZmCHEbFV8nxFQ==","signatures":[{"sig":"MEUCIQCC8y8FTI59l04kbIHOKJu0UPWg0V0rS34tCNNbyojN/AIgAU8v7WYNeeI5o8ZYo9oW5x0t6p6+32sX0RFdlG+R2P0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh04MKCRA9TVsSAnZWagAA7rkQAIFwVhx+RKd7U4mYUpjM\nKHC9xqRXigAHrjWCnd5cVP+8h81MI6FppdHucyWXOyfE/NPTDULYuTUHlpZK\nN5DqtyxnnMIKip84H/3gLTTJxYTJ8nNS1Jovo5kza17SO/fp5FJauNLP2te7\nU5DynQRB01LGPWbjiJUPEUTK9KFWnS3M6TjH0VWXh6Cd1oKiGL682qltuh8+\nWi1kORuVb5iOPFjDpxbfQPvw2Vhuus4kdbuWnpRgKty4SFjIcGunMBKjY9jd\nbqTPR+8pDCQW9z2VLy8UIj+bUVjlpX2EjJxjLh80PJE+raI2tpn4Bj+X+c+W\nGIbN4PSkThq11yra9n8Emfd64/A2R2Y1ZZPup7rCbg7gwsA408YVr8GQCiya\nz+ZU7dCsIJ0hZX4x+I/b2Kr/+B0/xYlQ1bFLukPhZaHZgP+yz1wWEyQeig3d\n8Vo6O7KCSHQr4weO0Zv5iei5V8isZ0i/a+rS64OyGBrj0Rq+fJym2nvbheXV\nUG6fqKyz4Ehv5rcgG2SVUAeNpMMNs2lB+qZgFEWlRZS0YcdWAX2OLFZxUE7R\nCmQVnLmmC5kgjGbE1qiXKAvFPJemKq6evfXFYLS5O0wHDCbEGiOUkXSPDrRq\nPFBOO9wpxB9oIlJeJnfxm5E5eol+kxzUUIeZ1cSc/LaRVYGb2PMi5YAEKBrc\ntG5T\r\n=jnW+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b7d3b8566952a03d2542e6513a40b6372c257836","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202203231241","@chakra-ui/hooks":"0.0.0-pr-202203231241","@chakra-ui/utils":"0.0.0-pr-202203231241","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202203231241"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202203231241"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202203231241_1641251594306_0.45938926720310835","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220483049":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20220483049","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20220483049","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e8286ef90a3d62ffcefd9000019a8378df0b7242","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20220483049.tgz","fileCount":22,"integrity":"sha512-Z1pAmAcXWAMDxHmNEZ4zF8P7TUv79K9E7AN543cRDk6iOGsDRixoEJ3tWUC8za95UwytdlpJE1IhMtOsVShU4Q==","signatures":[{"sig":"MEYCIQD3FFXzgXnUpMaSbZH646yJRWq7/2xmJ5VqmRutIyHkswIhAIeJaKJRIq457qsmwXOMoTJPcy3u8wnTgHYsu/s+TqpV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1AXfCRA9TVsSAnZWagAAviEP/jK4GmmhyWE8xFBsyI1O\n9AdTtT9xDgqF/jc0gVd7szlCUh78Uz410H0/cupV0W0Zg4ewBkNKsraX4aYx\nRXfa+6C3INM0YJgOBAalUfR7wyzxOu6itybenbXnhzqPj19IdRmeFcZdv31l\nCHUWpSDI4YEMGtW9KO4Gztj5tCaaN6pRJFiHbW59AqmqJWski+3hYd7vO9SW\nkhC2rS/hz8K6yAPVRQAmTANQJIpqsCz4nlhO0Ls/6XXzZ6fDZ2Ywhff6Lhhu\ni5rtFVhsp+WQlD4uRq5jrofpOZeEVq7qQGSNatut/V3OwNqqzHjpIPyENEru\nd1TSJcQAERYQ+N2zF+jEKMegujHaGDIIn/MWCkTkbelR7cT56Cc/iAlE1qT7\n3HuDsFLbJUsH6CKYGj6nCy8f/f+PShM3ebJ2DujAxhJS9byBOqtihM8mTvpA\nhYw4VeEmK9f4Azxlh3LcGzamHEv9EsHNDOcmT+A8VAn72hETuN4NNwoj3iQt\nbUl8t0DvSEkL32Ic5YrlWeauLhnkOqNIR+1RoswSo46axyT1nV8HdFGiT/72\nRKw3bXuMkQwIeAGDEukRaM4S4aLDN836Gj50KHCmuXvu/eoOzB3qgeC9us+b\n8U73pj7j7GzPc4hix+dcPUnUuFvoJRYGKy1fCfRxmPydvX14cC/MBpabs87+\nrxBI\r\n=Eh4G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b7d3b8566952a03d2542e6513a40b6372c257836","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220483049","@chakra-ui/hooks":"0.0.0-pr-20220483049","@chakra-ui/utils":"0.0.0-pr-20220483049","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220483049"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220483049"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20220483049_1641285086978_0.5509729750966246","host":"s3://npm-registry-packages"}},"0.0.0-pr-202204173424":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202204173424","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202204173424","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"af6012aa45922b1c4a64658c4613d95caebf1375","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202204173424.tgz","fileCount":22,"integrity":"sha512-wvrfiI0eY+SreL0pA6/NFfpWe6e/29q0cK8yCDhHwvgHmTNdv0GnFIQ2WeYVzEtNHntuVCuRlE+y2unHLWk64g==","signatures":[{"sig":"MEYCIQCbJiF/vFp4eGnp1KiF93ayVrcfFx79x/qAOQ1Z75ruYwIhAMpPiyAgJ2yVIlm1uHMOac20WqBNaIcjnv4jvh0a1Obq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1IU9CRA9TVsSAnZWagAA3GAP/jZ0hBDgska6apbMPd18\nu1elfM47Wwc1koBiWiAMI+Cmhgv4vqr59R2wCbqkc1RUhuaPAW1xlSh6s/SX\n7dxAt5Ms5lygvmzZpYhp9aVnoKKYRKGAl8YmYHJ5faAnWO8vT7EVkNt5jA4J\nUAPj2NlaThA2wFd6SE9bP/cwo6UeWjoTaGspXBeeH2s7ssSYcpc+/HWJybvB\n26lTOqWwIaSDHga27QBnyh0uqP8dBERkjyteWaZU3zSVtYkbUO43hBR+2QcQ\nGrP3GxeuDBDTm4A/InqR0SKi0nEe/tM0nI22ECggX2sDQEMLHeIXipBkWbXy\nf3ItSGimqSMQG7fmlGE0YyfcI3y4YHPUNkbgiWQBZ0lwnR5UlenK9D0/ep7O\nKAXHdiZoPxxggQu1Zppt8Cl0XwZFDHwPJf1Dkp2x0bVeJ1a/L8RG+fnHsJjL\n1Bcpnjccj3Vavk3R0CBsJiSX7wUVp8dau6BsGL4cm9UkIpgyli6C2L/A9hKe\nuUXUNhNV+ZkGSTCURn583Ft+BZtOGWg3jJvXHJmDcvp19k7DbhlhjxXlKPLY\n7kHUyH8IP7OdL0piYvbCFEuJJCPDBwG98uuuShQJWsBpfDy25CkRgm4klCIx\nLnRyVTqYKp0bmt9NtdGUwhG6w9EiDd1srysTnv32x5lZ/nm5U0D/V3OkAvKe\nIhhQ\r\n=ONls\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"8714d8c0a028aa331602db46dfe0102da4acb0c1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202204173424","@chakra-ui/hooks":"0.0.0-pr-202204173424","@chakra-ui/utils":"0.0.0-pr-202204173424","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202204173424"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202204173424"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202204173424_1641317693439_0.8196898270325212","host":"s3://npm-registry-packages"}},"0.0.0-pr-202204174042":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202204174042","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202204174042","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"73dab5794c574cfb3b02644d9cda5ced0d31eaa2","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202204174042.tgz","fileCount":22,"integrity":"sha512-M1/2cdd65huWLxHObNk7XtsXldXtVXYhrZx2CdWOUKaXUauFoKGG6sIwW0zGGAPPqR61QwMkjOVZG7BkSwnfWA==","signatures":[{"sig":"MEYCIQCZfK0HUAfV9PneUzb6Y4CDW8axEXVbcEaK9tm7eCHvQQIhAIFNvKi0z8+Hb9QwmLFR2yWzOZiaXB2a0uYIjF6LqXTz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1Ia6CRA9TVsSAnZWagAAq50QAISaU8F3HWLJ8zki6mjr\n2UPhpZlI7mR44OutW3afzzs06mmx3IWX1RM73mIiM5sC9RIX0YndJw242piL\nDKy1Exc9qoNFbIlXUdZ4A6QjMJLBcn/0QhrMiJFVdfDeK9x/98vDT2nQueG9\n4Ph+FuuMwgXO0avGe5wR8vvRQvzu1jhgsaTkQ+c179BKBoxAXn3Im96mJW0b\nz+DRXasWvgG3QiYDTBnwdeo0EjUdYQclrbx0Kio1V0kSjirbAEDzMnD+Yg8A\ntZpOHEe8x8e+2P+hBbMbfiubKw6JYCo+0lExKY5DwPbU+rPIzuvES1DiRBWN\nDsBBBxICRR/zl4X/sov5Wwx8XBejWGj6a06ii/+JwhRQkvxj3rCwZ/OFkP+P\nLASGDMSwjagGew5Zzm/Kis6AML6OQ3fnqlB745Yyxz5406kuMWc6A+kjyZlj\nGdRBJzNU9/olssMWptpf7S7PrylCzwBjVRoDutx5/Mzjf44ldcJU2F4H8QQk\nAcxy606omH6tuIwYtSsILOAA3g1cc80+e/SCZvyWX6xO0mVlMrProF8D9iFy\nbaZ7Pqw8ctCRSnU3LVyoZhSLBoeMQH/cVq2tR1iLgPknb0XSACl0BVpS080C\nN96PN1+WcHBfAVckn+2BBoY5s0OSuNKymna8IyCjF1G1AZj3H9h7mSRvbsxt\nSPdh\r\n=yLbW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"511bbf56c3567beec2ef1c71af24bef5da981596","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202204174042","@chakra-ui/hooks":"0.0.0-pr-202204174042","@chakra-ui/utils":"0.0.0-pr-202204174042","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202204174042"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202204174042"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202204174042_1641318074152_0.4611871767370477","host":"s3://npm-registry-packages"}},"0.0.0-pr-202204174930":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202204174930","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202204174930","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9be3dfe7211fa475110303f7af2457bb74470d77","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202204174930.tgz","fileCount":22,"integrity":"sha512-fV70gy4NqopcmzQPnZgUkwxRrpg/Dt2LKho3CewlNctGZEJ38Rg1ZYtDDlYHFzDzdLrK1TKrTpQqymLRKwH4Gw==","signatures":[{"sig":"MEQCICk4E4auERIgNOtbPrzdB5xMZgaDsx0C1vFF7kVAyE2kAiB5R1dqNudfPU34BG1HrmHwsDow1ObZornMFxqqqE036g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1IjNCRA9TVsSAnZWagAAop0QAJ0YD2vnzN7FzspaMhnO\no5Bxu7E6zJ0Z4MAmZMWnVq2TU6M2qqC9HNLCYkIdvQjrZfV5JNNlb0aZtiZU\nEC2NK8C+r9UfsH65lzr5wbeNG19rtpIBIvxs4GyxxsIYOF6EHLyBOnMeAEhV\nGLIT8+uj/C6bsesPqAQ0aUWqIkh1OJSXBF7E7/G/H5XAQfrWJMW+YxCEa+eG\n9JemoDJIXVpUensa2RmyMIGS58lJVCupKL/9XTp6E3iH/0p9TqoC968XiOB2\ns2yCkrbXNVR3dhm+TcY8QXiQl0CpWKfAYlSwF0HbnCNHeKgqqMZnunJe0KfW\neos9DbxH1Lrxf++yaWib5i7xKMcrAgeYIcRjPedMZnraFn3C7thSCV/o1cZ1\nORDAlqs7zPaHLo9HNdUKOOfwA7SQUSkGNwDljbTI3BHytRNj4SmoYsBxkkNc\nsI09ZFvoOuuFarKwzO7QhNWv5eT0/Me3DJ08f8jirq3xPmZ6kmTSixeWE5ZV\nYD8B/TXXWadUqZcinf+152DMX+xflnT3T+HMk0mg7pR4wcEm6yW8PsKiAhHU\nT0W5rX4BSy6vwJiCxsnG+OTMZ26sKBwnZJ3O7cqRVIpZu1OV6cV3iDWW8t8Q\no19aoTuYFhGqev19XPQDyvBIztOocSi7panc1iR1z4hzdHHt54EJvznm30Ps\nH09W\r\n=wh9R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"511bbf56c3567beec2ef1c71af24bef5da981596","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202204174930","@chakra-ui/hooks":"0.0.0-pr-202204174930","@chakra-ui/utils":"0.0.0-pr-202204174930","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202204174930"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202204174930"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202204174930_1641318605743_0.9180520986295988","host":"s3://npm-registry-packages"}},"1.5.3":{"name":"@chakra-ui/form-control","version":"1.5.3","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.5.3","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cbc8037470f8ef33d5ca839362e231edf9e1af56","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.3.tgz","fileCount":22,"integrity":"sha512-+UkOJJYUSGVATeNK/2b+KJx3qRGAtqpD1sR2mqd9DhgmJ/JUGV8q4LVcXIcVs/7BYNqP9B0JQUBIDlHNuTwlJA==","signatures":[{"sig":"MEYCIQCGIfbqw9n7SDHBqmLASiAzZrSvilV/LgqnepV9v8jyYwIhAL7IgB5a3nwJpiBtSaybl5SJVYzD8dMhsuvKQ5U2Txpy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1K/CCRA9TVsSAnZWagAA5KQP/itb3uQYqHr+NUfyQlHM\nuIvToZqLxElzk7hAhXepK27iJMB8MOUMQK9z3vdtHMP5rY4ASatEFkS9s2Wh\nBEctchIvaUHdTv1OAZb9xqDKKoa2/bBAviB4CBQcNTjNK/htjr/8Vwb+o6tB\nk2diCaBYrno+o9S/ecGMykd9r8Tx+219X6mHV/Hq2TEtim1mEIC4+5PJE8CZ\nfI3iStFheWk2OjNjbXqD+Ohd/N+74bHSc+3klVuHigyB3A398L/C+yeBJBGD\nLiLTbaBTItGXu6TDG08gt9y9u4VUVNb595r/pF9eA5UisNt9SYYO+xm+OtUq\nyXtBsY9WCmta+ISlNOQhy0BNSplY3b5LpPYceAo8fvoB1z8zgqUrn4C/6+NE\nMYqJunczCYaHBCIPc+lELLQst0YnOc6lnOc/RJoCFIZY79QTxabvGkpxJo+7\neRUfqFJB1eFyGorl6RJkuuQ6XhoVIW12uvEtfKNWdvEhX4/7yi23JEYWGGp8\nkSyEfiR5FDl80wBBBrNXkpA1E7nQGrLOo+zErZqGetI/xEHJQCHlZ5artzdY\nkCERYlUV2YKjLtXLiZW/kpio988biZ4rvJApYwUkbkfZt8Ea1OcvK8og2vC6\n984kkYKZAKkEip1msDcnlDK1Vrcf8irCEHqCpRWOLx9RE32vJl9xzlS8+4Y0\nAw01\r\n=eBTn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","gitHead":"e2525941277b6b96b38fd6dacb247ccf40cd2fc1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"2.0.0","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.9.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.5.3_1641328577938_0.5560471372400675","host":"s3://npm-registry-packages"}},"0.0.0-pr-202204203645":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202204203645","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202204203645","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"24079d88a87a9d01e35c247183f2da83753b1a54","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202204203645.tgz","fileCount":22,"integrity":"sha512-t1FHon6SqIUDaODXORy/1JNjX9Oq3leTq5y7Z1FolNvIJyBtqik+SnVfI5eR8Tuf2qducmidvdsWskZZalHk5Q==","signatures":[{"sig":"MEUCIGHbB3wL1QBr69ktM1LvsucMRjZyGSt2QrW3cr5tmSRnAiEA0JsiIBRpevP2a/tr6QuQDzFTLDOBgosewhM0goPAkIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1LAACRA9TVsSAnZWagAAnoQP/3/giFVsOipdxfZf2Twj\nVTzgEHchZyn7VeANBgpZtHcQQeutGqGM0FqsMdP9gA1RLroQTfZzBkpSRkOh\nsyRUhx/RSwmmLjdZPnId+jT3mAGbytrk0tXqiGUstIx1XlGyfRQh+tBgdqWX\nzhQf5YZ7HLdGtFbf7tnMs2NzHQk9Uw/JbJbji9N2t7KlMaqksHlXX/3IRU97\nwWqyjfMnAe1IrPFM5jtaH/gUOUIDWleguKblfspPFhvqLAApD40x5kpw8uVe\nfpYAsuev/RVWP8RX1Exhb/PCtivYsqTEaTMFFSslezkndXvRqDW8/KFUw2pp\n8Pl2fB7YTuMwqnMgZ2Kb0JnZf7EKKYzNJbVaZQU5Pi9umkuhs6aJTvruwsdi\nkEwCEpUgYjc4oJ/wJfex99suoCjZztur+mxZIrFi7zbr+Ermy7OfJAT8tyEV\ngY7eSoIDkxILXZO4fc87bBrKlVmxbQsbra5JybsetPP4LPOUTaXjHW8dYshL\n1sd7iBHAYFUBSbWlXXx3enf3Z/+rbKwd3Mhut8tOddQS9iXlA86Y/NHkTJz5\nMgaUAklGfT7K0HKRQ8QbGRLPbCGzCwRJk6VI5MlPigZiAmUAwA0He7x3KCpn\ntiq6dXZBqeyGA/kFOIUbRtYqNqO+EJMMnLjYT5mTbd4JXG7YYl0rWbYGO8Lr\n9k5z\r\n=E8W9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"dccb9a12709b2b6070a82868e344887b7a3255da","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202204203645","@chakra-ui/hooks":"0.0.0-pr-202204203645","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202204203645"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202204203645"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202204203645_1641328640322_0.757870498394513","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220421928":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20220421928","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20220421928","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a49f7fc3ea3785634d0f69d039cc5a213d262f50","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20220421928.tgz","fileCount":22,"integrity":"sha512-n7CAzxQcldv6P4rbCdEb0E3/hbL/I2EwG0NBeYvxWUOxH4D5TvTnsiUQAIr04GYUKsVSO3IWbIXvG/vHs+c1KA==","signatures":[{"sig":"MEQCIF76V5IkRH1FTyiMesivLl8mHhgQJRrj4GSc98Xa+ACKAiAUoaEbSkdNhDwbiFXod3oS3tZFgGywx168R63pzls7VQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1LenCRA9TVsSAnZWagAADuEP/1LlEW5qfMcx1b1I1yLZ\nLBUMxr9XCnRkT1PSI2BQRU+uZAAgH9wX51oc6daDOKJSZyZnncFvvlFOkjsD\nVdpehoqMAyEGgvNCK+3D4pSj/1iUqM6+ChuqQoFURV+T9KhZsl+g5277sQ3T\nXbYK1UltJgsSCW6l1JWMP+mul5ggnRrPAT5daX+YXogBiRBhyMU+OVs/sDOe\ni0BMyN5sa170uOismkLHw8jvavdmpeeZaMjs6Bqcr9Xsobo3I+46YW5Bk9JI\nvni0zNkbbxjr0z2OyC5I4yUdEGUeYYvrH/ccaqmKEaxPgQCg8Timmx4RqSyS\nOwYXpcbkVsJvPra7UclasQVpNY0OODILlaY52fulWXtNP83s3ldBYomGLb8g\nabodnXdPa75jRDmdDjA0KyUhMbsmnKyOmakd0dDZs/ljbFFhMLwf7PZpJTLA\nai+pVscV9Xa+Sx5sk8FqJfIZ+2MUOMfM9PsgN8HQQBfYXu1eC4yZ8i1BNVaf\nCJREKthGAH9QrXP7hfU+xgN0afd7SwcnVbVpWrcNWdpCSX+vL/btCuIa6T3L\nFqtb7oO82GDsJjp2Hytww4KB9dSaun62GdjfGWcvJdA8GIbW6+wE+9AYaouC\ncv3wfhYFdwOGx67cTbEGLJ7Htsi1HXVLZI8LU0ZRUmZ707N8EFfLBOPXgbLR\n8Bd9\r\n=IFRj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"4ef88685ca1e33e2ea6997dd3059f5f93920f153","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220421928","@chakra-ui/hooks":"0.0.0-pr-20220421928","@chakra-ui/utils":"0.0.0-pr-20220421928","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220421928"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220421928"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20220421928_1641330599307_0.7159874260787371","host":"s3://npm-registry-packages"}},"0.0.0-pr-202206185910":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202206185910","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202206185910","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"db16f7fa0ff9d675ce8c4d12d9e45c7034aba7d6","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202206185910.tgz","fileCount":22,"integrity":"sha512-qQ2kRQhD2WQjpuZ+2tsygmeELY6Q1Tq0fyciLm8AfUj0jGIjcCgJXQfOHfbdcvkgBvaGb0belffBrsq08HbUjw==","signatures":[{"sig":"MEUCIQDvDUMTXzWc6fUQCcUHuiidyGYFhW9APIKwwWTPdL4ZigIgaVIYyU6Z42Z0TizaJ4/emCDc0X1qfFh+YiaCGZqyqtM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1zwaCRA9TVsSAnZWagAAIIMP/iFPNeiJFMXr8L1Rz3WS\nLEq/CZZX1ySeuTnLf7bQ4AvFuVkkHyLkrHTl5pC0xM6kziYdyZAQdGKJ/uar\nIMDpOay50kusMBk0sAUMEDWBXTyvqRdzkkmu4tJXzTTYsltK8aSqxVcNYOJD\nvHLFhF9LYXieI2SvUbYowLAoxOftUXF5XmboVhJHgOBgNeDeDGaYFdLooo6V\nzoXMMiQZn6IeTTRa6dmLAxzK9b/kHIsFqfMZPzT/dfcU5c2vCI6L4+u3iYzn\nSKOPp+sMkD3fRZMjpsQjy4Tbl6zb7HKmf4hHvtEc63pqby8KZpynxtW+CLSE\nMKwPywlk346p8PqY8j1XLF7yeH7xb3un/2pxoKCYqnYhrsqjVW/JhZYGabda\nA0xlW4NE/ughmV4+ynvd05aD6ck0eac57WJOBy+7alm418PCzP6HNKYiqvO2\nKr3PVMcaaUp0nGDATaobP8Q/l8Xl7gF/xZC+Kk0TWJhFS5NGum8zFIQW+P+5\nKn+2hz8uBLrK+eoli6QGFjLedHoaJ+qW8MPOHyqpJa3Lme3tTFNijNKXdsdw\n0rZR9+ZvxSl3yIugkFMGQQ00DRopF9SWJ6kaZRpiaQurhEKgypY8JyXHVuaD\nZgVV0CUyIR9dXBTWTS3NcQlgA2WDHdg8oJudL2jcXAoYNc8st99bz8A7RC8e\n8t6J\r\n=Gg8N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"7b34351fcdb380a13640a5a4e7927f4585848797","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202206185910","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202206185910"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202206185910"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202206185910_1641495577827_0.8190219860284935","host":"s3://npm-registry-packages"}},"0.0.0-pr-202206192031":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202206192031","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202206192031","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b2980737980e4c32bcc5b27a9eac80ef3d35abf7","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202206192031.tgz","fileCount":22,"integrity":"sha512-OHWb9C6VJTMLE9x0SHXDRYlE4Ep/D19BgBdUw3vBz/HKRBMcMhKvdAKcwh4KzdUlWQyPrwFi8SfztXj4wyVOtg==","signatures":[{"sig":"MEYCIQCMGZMvvtNZU+XB079Wy3RQrTobf5Hruv1vjXTmjEHilgIhANI1yAvP9wbKSdJ61IVhpkMkMHTyAvOsfsfJyr9/1dCg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10EjCRA9TVsSAnZWagAAarEP/1VjIXalDdfTuoVXREhs\neulPNrzRkMo4PXN3EFQi/6J3AK+KH20VjX5C2vCsg40dXIw8efuiWzl8fPDB\nSu4C+5+w/RaETo+rOvEYeJlzc5qn/HbBfboB71vxXIxN88cwKqz2N2Q61q5f\nDk7t9ML6LHpVQscwlGv++0k01nh6Tiz6e1eGsvOVcb7knKXp3qmcz47elrMy\nEArSIbOze4kp5nmRSu9gD+R0oLO0I5qO6I6h8Jp+FSfzMvfua8S84rOIIoAe\nZlwSwstO6xlaNiXecHAcQHoBeMSJTIWARCgsHE1YzqRqlfiZ7ISLGtl+KWpU\nDO4Mdh3XQF1I2hPeat7JlhlRwXA5KB6Tm83VhBAfR4WnBgZOsnFdDX+S+iAl\navWJ08NmEPOBiJqHMHJKE22tBCDW3Z7d2xWVXLvpFOHYkDFjkunNu+vJJ6Q3\nza93e/QxPVvW9FzwVHr1FWFkeAUCfk62bX1TamNw2GSWSeZ9r0KHkSoNSa8x\np1+6cPMamH4ALYdLVd6KW4z21bbmyamNkkv8woCfguaYBhKJcj8JOXI894tE\nEL+o7uqvpAfeSN8Wu/93QLHIUS3Se/Mhq+t2ER5YbJYJYEHpvJ/12N8yR7Ud\nQN5emlNZh00odkTkhl9PVjo2ZD6MUxWTaYjQnk579VHVflS0Td2/QRyD3C7h\nlPYT\r\n=lFd4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"a538c4f88395cff1f6ce14f27ac201b5f63afc10","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202206192031","@chakra-ui/hooks":"0.0.0-pr-202206192031","@chakra-ui/utils":"0.0.0-pr-202206192031","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202206192031"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202206192031"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202206192031_1641496867503_0.023523586922937767","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220620149":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20220620149","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20220620149","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ec61ff661894e4dc001a7a6c40a3c52088b0ea74","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20220620149.tgz","fileCount":22,"integrity":"sha512-148sm2gdSu8n6qHbK2ecShDQSd/1aqTbSyTwD5G9BE4yDsMoJydiYjavuCcolwVk9FrzXBos6eytfD90qzwSWw==","signatures":[{"sig":"MEQCIA/zmzgZ2/paTwuxwjDZe0oGbQNNM2z4RNirdvXr02xWAiBhGAhY9JWXTPaTrj31GwHaleOeyaZt9Df7JfOH1H5WMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10rMCRA9TVsSAnZWagAAeFsP/2EIlm+SJrmoZ0hqLp7Y\nb7GsDP/ZEInIHkF+xEat7KAqGhM33J8bQLAFvRIbGi7voPrSm6ML8wKglGc2\n0k2XYqEkWSTwmOYV0UvR1C+Q+VxipyL4X2JpHoktcmZ/iLNoAE7qS9IwJlWp\naMCTt65VkayE7geYoAbC8kR6PMAMsgH4uVX6x+M1rh2N1jb4UY4r0JzacyOx\nDJxzFn17FZkY2i+LeJSGxYt6AS7C/KjTaEImdt03XWCmZasE0zRi+Rjve5Y6\nYEQFcsgthpEie7rPqWRa/3EBCMk3tdgK1dpZeFGztz/4ZwODBAOFXizf6Bz2\njreKvBFbUkqaYJyC4z1GyA90nkg1jIcfIIQgRl42TEGYtKxypwLa5XO84y/S\nAH24TyIzGQ4+1hxHW5jVhLWquX22OkNf6s4UGU6rz7xr35cSyE/PJBGeBWNx\nHatlmKqLQOdEilwCM5GOa98lFKa1ccEsTJO7MTK9CKoqqhAT/9WRZVmV2kqq\nIHxqAmdjNth7RRPeFIdE/jveb0VYUuKl0+VQ/Gyd0l0DtAwB0yxnt4BYhzaN\nR5X7K2icvI0rtz4LaBk84WlmYEsNaDFT2x4YEoMNwLXcF+jy5VVe+QDVtHbx\n4Q6jJvKasSRJ9O2ljqAwmipZrlYknHutSibjxcj5eKEk07CGHVktOmWFduzk\nqqHN\r\n=c3Fo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"9d02772e8fd7855511820b6c729c0ce72a347951","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220620149","@chakra-ui/hooks":"0.0.0-pr-20220620149","@chakra-ui/utils":"0.0.0-pr-20220620149","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220620149"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220620149"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20220620149_1641499340430_0.6695301391843784","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220620653":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20220620653","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20220620653","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4fd69ff5e74ced13e3b211e9ef49377d9504aa71","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20220620653.tgz","fileCount":22,"integrity":"sha512-42kgLol44isAe+l1QSTpjM26OKwUDDn0eSfx0VMj9Hv+PL37XQjsOGxZV8Xa5yCQQC9o6TkURXb738tmgqIn7Q==","signatures":[{"sig":"MEUCIDmjK/eBJQQNcGiAo4eUudteWAxyhEzoVCdDlOitzzv4AiEAyKqR/VCLKnSpwrgy8xbwljtuYmiwBzMB8P/0U1H3lRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10v0CRA9TVsSAnZWagAAO0oP/0MFwuQo0Qt7mH/5h2XO\nYkEGrXEfxwi1freHogeS299QAFfbgW4HNEsWcnusq/T/Z5Y3/hJ6jtARSBQq\nfYyhe1ppzDHNxl75NsS3al01hLwaDRmF9iQHMu4B6NIzdBWjv8lVthxTjncD\nTV0UM2sU067teiHEEc+uxXF5T710qW3HlJuVVKhZ3uTMI2PdEpSgb8ekkCrD\nG7Zyvxgm0RdZAdlTK/uH1l8uAAfYP7J9pQ81FPMiUY2IcZqgMErzf2LakRjR\nQkwTlu9SZ1lzMka1QPQHLGurDvkz5LL/0032JBaYi+cnbzg1PhJLTMXx0Qnz\nmyMqC3gAwE+6gBOfbsWvJrASmj6sHOteQPkXuFddq2fk1EVt6Y+qATa5pU0j\nYF8JUyoHc5dEpunnodwkuF3Gg9M/QChoreVUMHV4L18E5w0wqab6tRK6/9nQ\n92C3qwVQRoZSU8qE0Y+ir3VUeL1UyYLTUNXx/UkLUHELsCAE0bjvTpZdc+e5\nwlCUVt/bAfmXzMKRiNRct9daJBzBWioNA2atpZCOo4g9gl0MCTEYF2yLity7\n3jmaSVp9PJw/oggEQzDipX0CuzlKiEooD6+KwiYli5KmiH/ndQ+YIZ+WAR3v\nyAPxUjh23gSudNRu6mTD8w5N1wjgthwc4aKuN2BKUbBIXB8h8tMRUR35JMUA\n7YXU\r\n=/22+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"424dd3cd48383a7561b2c8558bb5030eeca54f2e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220620653","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220620653"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220620653"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20220620653_1641499636618_0.5183668165522788","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022062070":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022062070","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022062070","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f1fe511b5fdb59ebdccb625959dd0c833c8e02d4","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022062070.tgz","fileCount":22,"integrity":"sha512-/XM+my8eKW5ErTCdZOah1iXK0Ow7gNdgLLdemvK4ZBVmVncwAi3jT7gB/s7RcPRJfjv1YZdJWTKskai2ywghFQ==","signatures":[{"sig":"MEUCIQDlNhMOSqVLKcwuklsgI7WEydpoJQqIY7h3AOVVVhiNtQIgZzwX5Up4n8ww/NeqRTvCmD2enKZFaapri0zlzBiN4hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10v+CRA9TVsSAnZWagAAKCIP/38ckQdyOUR/tspIMjmN\nv4qE7rxgoxotTRNL4lnK9AcX7rR0x73eB9QOG3NyvUlYJMceSmyxVvx8sHGa\n75GJsqWT4GP0Fktu2/iLE6X2XiGnFfV/nIhmjGgaXLKXqrzuNPKfD8mbHash\n9Y7C1FRIIP5Cf58TnHcreJCRbRgonMHey3z7OrId5bU/z9jGEj7LKNJDgovT\nazfWoVyTxG2hN5LEDLMYiCWKhScfMSZdtRK5jZx7Gb3DJrQBIWQdAUh2AyuE\ns7aeaysNTiGKlWOz4H7BjH4qAvZDmo+yiAOOXqWHJiS2gJc/KBTrPAUga/F1\n6MFNvw+5AoqmCVjjncY/XPgGCCnYBfZrMsSZAJAsyy9ZdbACY9w2nVopk1h/\nPCX3pOR+lJFPJwryCvDm/T9Ub5okfUWUNd4aPtyY4AzfNCTjOKVei/jUvQ49\nEVY5jP7nBJ0xzd9pG3LZEFgrQCAipx/zdC/+ZXbxZK6+nsORVGdv5H5RTs50\nkULlLDh4bsyHodGQ18XsKEpMCsRR4FL2i71RQap3BWonzgFWZxELmh9NioNl\npvE/6VAijUiCFb+3KixHOkTDR1A0hunSl55ljIjlnh7kNnPqvm+2j4ufvV38\nyOASt35ZYYPNlhnFYSMz3FMn2aeQyIVn1nj5Gtfmr4QJ6QHgr/CnbJxe05hj\nyx9R\r\n=lm0b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"424dd3cd48383a7561b2c8558bb5030eeca54f2e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022062070","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022062070"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022062070"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022062070_1641499646730_0.6080224803844556","host":"s3://npm-registry-packages"}},"0.0.0-pr-202208163634":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202208163634","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202208163634","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"db43dcd22fa406e6555844cb78cb6f1216daa6fa","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202208163634.tgz","fileCount":22,"integrity":"sha512-rSpKt5G9mTBpwd53QiILnNtG2yye3JSNe/ANHej2DQ6TfNPSl5CTNEqR05xNRzrieO7QpoMI8eQN6aUXzu6SrQ==","signatures":[{"sig":"MEUCIC/Xv/6+crqTSLax08LOVJjcTeVjUR0KQMeQ/FtGSbUvAiEAwLD72IJjGlCwjXtTxkma9/1AvB6PxsWrmT/srOoUHsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2b21CRA9TVsSAnZWagAAYMkP/2CvrrqUr/fbEAS0Gvwd\n5utBCmckgv5TdJXbCwAGTGTmG88C4Svp0/hiH7IDcUNd705kjGV4knrGGKwR\nv8n6Q+JM1meBrlSLj7HsOWtrSA0ogfiWVaq4j1lRR03ZyrhdAbYDWRxFwPEu\nq+5IzJgVhuYU5c+Aie5tcqT/jp/Kibv4cOxrst+Kfc+6cTZXuDHKP9yuJfuT\nYjSr+5T1G4Uwg7uQwdJaY5EBnlbbti09YMmUQdksri425RUL7NAh742Mh1Xg\nyIbhKjzMc+BqtQ/+VfolqROQSM/xAV179LrAEA1YgQp8JqXczS71JI0Z3RLw\ndQHO4XnkGzSLNMJHyxtrqgfoyeKfnWO7kZwrwchaKQiEsIgnRAwa1LPxWZno\nvvjQ2NwR4SRxiyj/f41vptD+V55Hnwzlvx32+9sdhk8AT/wXBcNUM+bOZMkr\no8TyIJMaH0soIuwJvyZJfGO1Y9OG2dO6qW1eOfnC+UMN+vnulHQY7cc4pUNr\npiJ9z3L6zd8NznrcCfCzyWS042mkNwsz+VV3tZy5nlLdxU9QhtzK9ULMZGdU\na2dTLYEOQ1G5EvBoI71YzuLRa9z8MA/4p9OYs+14V+6cMtz1p5qSj7Q2FuBi\n+HLtXZCWS7WGTYQjoPoxm82VCvsxs0cJK08ME57Q1COaR880uPYIemb07Cir\nZgkg\r\n=Zinn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"c1ce58dd840bb3be7041b81f4ece559fd7a37f7d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202208163634","@chakra-ui/hooks":"0.0.0-pr-202208163634","@chakra-ui/utils":"0.0.0-pr-202208163634","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202208163634"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202208163634"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202208163634_1641659829505_0.7248745026060528","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220816386":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20220816386","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20220816386","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"febb64ac1fa560cb393868e5b34d63b28c803f22","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20220816386.tgz","fileCount":22,"integrity":"sha512-yM6Y9/k+CtlDwAIaOD6aWJVGkmWZaB5I+9ohN2+QGMy2fOlaBsy3CJX86Q8ZV6uDg6tnx0qgCihq+ONjxgrq7Q==","signatures":[{"sig":"MEUCIQCanCmF9CHzRHauLaddqOlg1C7+Vha9KU2P7vlhOJ9UZAIgd0Wxwt5mvhHkp61ELBxv4OiOvvQYyrC1/QEO+f/pbqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2b4OCRA9TVsSAnZWagAAXrAP/jC+yHhcwqopXPRu9gny\n+0JNLuPhuQZClvIsGjsaQ+47w2mrl59NRTx8IJULbZnd2GLmXcYMa2JcKIKR\nHrcBtPLVAngbrsoMxkGI9eFOqhja1B1cM7rt61K9liDCOHGFqkU7EtnUMYDw\nb0ChqGyBCXszmZkuWuGSWw1AgnCeHVPUkwtsuc6B3+gZqt8wGu53Lo4acrj2\n6pzwalKaelP5svFiKTTOH3FXd+dWAW4uttuqY7egp0Dayq4FK2lgFc7ijpAj\nKBQzG/i37syibBt1KEberlWDvWNRUmmm2eW/RtPkqZcoK4sIpVaLkwY2+EsS\n1oVZ/hTPCawi/Wc+nc06GNo7aW3TJIFU1PyGaCgA0GzbcuxyguQhlbebz//f\nM7+zNOep/Cr9Mgows/UkhC1u3NKu3LnU+J2CxfkP9S7SVCmH62AShycAsYiJ\n+Yi2L7rsgZgCmy9F+bBu3Jo7rCi3Odul5zX0KQNoXbDzq+6lb9P9AF9KUTh+\nUHlSTC+gcR6mkQI1KQ18qSG6oBTX1JdMVfAQsDiHYsIfpUCBMKgKLtIWZtst\nsfmd5qWKwlHhB18edhfqW3KhbAPQfF3JGCEasuB4H77i4aWSfttTHTciqlP7\nyT+b0w8EGtipMHTBKOi+REyoLJDRWOLCLoPhFXgpR0eraKPCWaq2+3jYW0dG\n/xz9\r\n=DbD5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"25cffa7d1649efc7866a0e2ffec5a6ffd9443d90","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220816386","@chakra-ui/hooks":"0.0.0-pr-20220816386","@chakra-ui/utils":"0.0.0-pr-20220816386","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220816386"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220816386"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20220816386_1641659918350_0.26744856784724247","host":"s3://npm-registry-packages"}},"0.0.0-pr-202208164521":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202208164521","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202208164521","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d821369c3ec299bcbeddade3992ad1b677da99f9","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202208164521.tgz","fileCount":22,"integrity":"sha512-U0P0I45av2UY6NlaFKJ/e9dyTYIxVBd3V7JTpqxYelTD6IQJrpFXN6qJxUzZn8tH2vcwLN++vC/hKzxsferD+A==","signatures":[{"sig":"MEUCIQDBLGB1+Ocx9CclR0GmE71V5oJajglDhyjJzHJ7SoRY/wIgXs9J85bB1R0Tsq4+Ejwpj1CSqXITyONHPFVOlc0gGvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2b/ACRA9TVsSAnZWagAAMIoQAIU5Y1g1XqIFeblY3PPt\nVdcySdKmzqGnoa4cW+z+lPy+s/ADz4lgVtAm2Ha3VHVvfHKVIxRntLkmHIQG\n0JG86cTXGx94JPB6Q+dU1I6hro10mLsWqubwQ+h8YA2o6g+3dVWZY3cwx8L1\neYnVmcx5or9peNhy5A/0bJz3HbLHjkk5waLfxd4rRf3JZE2OA6h0rQ66jsm0\nacK3Ftfgjs9Tss/yN5/4HwWFIl20h8A6J71vsG/E9wZVn4y/YNFHFOu0GLyd\nznW9R1dvIg26B4g8qGMh3P39OgXw+dglomD5fcXvFGEdkUzE3dsI+BjdoUoZ\nqcC2neUYfNjqg3LH4SnK8sCAXLuLSFishDlet+9FR2pfSfbtB9ID1SSpoEA+\nwk+UKgihuKICl+8u7cDeWvTECbFLLkakLNisTWNQxW3dxho6fUofZboC93qC\nPauoUZUtahaMyzM+28RD/2lQflCaMz66k1JySepKYddEIDYiEI7AcrM48Hvf\nzmOMp7KnDur5RkLCwPc6EiXIRaZI4HiyTFzElB29kxr+6HqdCfQcDhGfMA4C\n5PnzWbpG+ztDxCpP1U/KPrNgixj6ZZv86qMyCYhOjyddB372z3bPhA46aZLL\ng+sLMwKRLn1Y7ugOyUbWI1/YGWSbPNkK4n0F7rRFl7A+UsPd9GsSmg7+IOOH\nAOos\r\n=W3ot\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"25cffa7d1649efc7866a0e2ffec5a6ffd9443d90","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202208164521","@chakra-ui/hooks":"0.0.0-pr-202208164521","@chakra-ui/utils":"0.0.0-pr-202208164521","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202208164521"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202208164521"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202208164521_1641660352316_0.036217988944928114","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209205059":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202209205059","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202209205059","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"aa424c001e80180cced56d6223a1dddf7986908f","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202209205059.tgz","fileCount":22,"integrity":"sha512-pCn7dBgtqcGuS31m/eq2vkWsVEXnn+CHdJFE30kHOlg2I43egsED+swj+IZ1s6VhDgG81JlKuLA3Cn7+sPdJeQ==","signatures":[{"sig":"MEQCIFfrFtyySYji8GFHwYv9jGR/l22L4jOtW8P13mhj0WkaAiBGpzbTX+v6oWqbgknhQIJbdY7N/2aG9sRcZ7DJqYVj6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh20rNCRA9TVsSAnZWagAABc8P/3MZ/Fo+GgutYnwgYCuW\ns9R91/L3AvCG0Chtif+KNSuazBNK8CZ49wp9f7qXF0xjT5ABTqcEZeacqn4D\ngVMvQaH+jY5ehr6orcfR2BWCcLbOKmcNB4U7duGxc74XVk4GIAZL9CgLpOUS\nf3C0G3hpefe7Q2EocZT4IqEMhKCENmtdwMRc5B8TWluFJYdVJcGXAxeTMNGM\nn//xUfDeBIlBCQWPFtahrULPlWQ8Fo38qdzJembQShBMQQQbVYS7hZTDbLGR\nAHR8BACu12gxHQUzjnHBBQqD/3HUZNsiGsGyLNSVr2zSKR9kUT5LA559h47X\noR0E97tBYX+aoaa8HOThfiZVwYZDPneQNU5A7N/XfyORcC/e5/Xb/qaaKR06\nB81jgldcy1dKmx6o4z/nx5aK60Gu0luyKFYF4Mr0Ht/p83RI+QezvDr8D9r5\nvRZ/mviZKh303lsomwzRikCzamgRTnAN9ZnLmcX+q3HYDH6rJ97JcpJRB/oP\nNkTlVdDBGBfuWcb89YHTSp2YmmgOsV8T49YaWnXnvwjZZ3fMIvdRiKNwOw9n\nMWr5vNpEsxhueDWxVgaVjQSrlE02MQmYBb9WLGf/O2sMByUI62yHl7gKe2qo\nRzEAsx9iKbjWY0Ps06QG0Kltp//oPTqpV+o/4lEGaL+lf/gy5pemlg/l5zZq\nCxZA\r\n=5mS0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"964c30674af12a49400cd5332aa6eaf02b1e7f28","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202209205059","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202209205059"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202209205059"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202209205059_1641761485155_0.25651575536792093","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220920538":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20220920538","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20220920538","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c087182612a63e43ddfbe43f0e795b3145520def","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20220920538.tgz","fileCount":22,"integrity":"sha512-rw2GUvlP2Cm0YKdc/j88/3qyMxFSlZhN9CsMExDoJYVWInJ1J6YHBbZcbKFiNlH8rllouhvOfJZnFmHqpraxVA==","signatures":[{"sig":"MEUCIBEJu6EAnQC8PSR002puryiyIJBBHMyH/g1tLixElkaQAiEAhQbgu+sgF+Hdth/9bqydo9zkSPurCL+KYlF8JyEdrJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh20tPCRA9TVsSAnZWagAALnUP/3Cj4CvkG+0SD63DS3ai\nMZlwZmDYC96Zt1w0o3rVrOQN4fscxUndeeSV1RNjJhQDc5rVgyOHpi+OIjFN\nwKHDCTBO4Euro161SPl/E2ykLlpBm3ZDS8YybrXTbOS45AFjIhBVETKX8tLt\nlp/0tLtPNo/KnYDoKHqRcn+K1VIInbApt6O0mTDibncz6LeY5ZisaSNoKrr3\n346RB3RHPCIUEvI9dwXpVDDXfsUSv56jOq0kkeeSre1pUwWE/3HbJ8CJs5GG\nDHjjseEr7LKXKJMcOxz16eIRvQlD8gvKFx+L4i6knkbYvst/49FtOmKxt8Xv\nyVgvnGtTJEIWLZpZ6tBlKLHmTJp3YfWP1Vcf+adGFh0qaraqHgt6nnhCanbo\nMin9YNAeYToGXeEqe/MX9SZ9ZD5uDSkC6KUzJQRhG6ZlqbzvkZRT/+R2yBKM\nLB+DQXgMdhhSQ+KrFqtzvaCdFD7Ish7bitQcvvtn2ASBg/2nCIHPJhYDthyP\nhMFzzi99QSKiPsoofXs9NUbJhj5oYYE1XQPkXsbahHfEb6jIaU/Ggjhr/1UR\nfGbBQKwSBS2vKHZSHfjk2Do8zIuNNqZURCFQR2fJX5ciiLYrdX72kXtN4f7G\nKWTQ29OyW6VBxXtFKEF8Uy+XH9guzbTQxxPjKYra97xOulTtZBeuZo3GXJuc\nYRaF\r\n=JEeP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"1e9727cfa2fe06bbcbaaa28e2eafec37b111b875","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220920538","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220920538"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220920538"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20220920538_1641761615635_0.6336798163772259","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209211330":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202209211330","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202209211330","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"51c3e8b74fbb7b161d93df53736d71b9dfec1f59","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202209211330.tgz","fileCount":22,"integrity":"sha512-vWsUkEb2gVJarO3K1WaXwdKJH8BijnmPb3tTaOdR7jeSQR4QylwfqGn8vPTTXzsfUjIvDwF2K24y6/rqYbbBKg==","signatures":[{"sig":"MEYCIQDc3fNrNtoztBinlyxAQmjoPvAPzsJE75QWX3AqnStidwIhAJueenFivAsfE6BB0EmNlsHkWUDV1giogMwJaVdxSsVo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh21ATCRA9TVsSAnZWagAAI4IQAIOxfgIR5kYUF//Pvcm5\nfKpuqOCNL93jWhwCyPfH+/qmRuy2ZG1MCJzk+A8BFfYD8quWQJE2LE38F7H+\nWGdnyglZQ9uWekxniIi46+nSniguQjEVyI8RpbkEa/oINobvwSzz8dVxlhx8\nWpBFCYG1ZSPtKeYWP6h1hrA7bDuKpXD0UKPPdDzFDJ2uGKt3y2wdIlPMcNHU\nZVdR//3kI4+INr5c2CLseUYY4qhZsItB1N1VRhIaO+ufWFfxlKKPwYKvXzGN\ntkJLfns6CC0kGBbBdUxr4XCyBqFpCcidWuxdwBsHcs0VBLzfOkWUasNujhsd\nv6itG+7rEP3DLoRi0FFcpgAuMZwxJQceilhtJDBN4SCFKm/vDFGheyUqBIgI\nRim1yq5M+l2WJm+qf1Bh/3Fe3tQmUw+Go28Td8EdvCoJRoX/fbdqQKF/Ext1\nPGJGm/i6f/iAMe6pxdmGxvi1HdP5KrE2NjRoAekenyGtspKvdGuzW9TGqn7v\nFTnGqMeGCGlfSQms3fEi7gGUFZh/Q1LgaVm4Owq7ZST1DBDfz6naxe/fFDOP\nKOTQ/FR9E9XLGPCdR3U9wBnMRzvxr6Zk3X7MmOyx/0fL1gwZJq05pJXPY/SH\n7bn8PxQ2KNmF89R2dqldM6QlXraPMFWDRw/h7spOcqXPuA9DPOQnB3Dti2BN\nxuxu\r\n=ODZj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b18ddcba046cf5fad125d5efdbe31f414e4d9afe","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202209211330","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202209211330"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202209211330"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202209211330_1641762834864_0.991920566340031","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220921590":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20220921590","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20220921590","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9411807f71dccf270d492b7ebf260149dbb9024c","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20220921590.tgz","fileCount":22,"integrity":"sha512-VNxMuX1r54ubhO1kyByVBBK0Oh9wldRdMrQ2Jx40B9rbvPe9UaQ6zNsj1dUnvf+IlC99jw+wNpZQa/cs3D3XBw==","signatures":[{"sig":"MEUCIQDHjLCLTh+shzTAdnK/Jf0tbO3G5Jo8xuUVvPgCO0swJQIgAQvM8bZb0L/MtxurkXch54WkALur8r2a4N2xwS2rK40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh21q7CRA9TVsSAnZWagAA9YoP/0PYGOTrLvUsIOy68CLg\nMzn1iG+dnU41hw05WCR5hMiP1QGNrbIXmiguXdgvB6Gid8vUjF2VVGFh9eMe\nWOJbqdLZfNWIMcmIXXRXpwr8oqK2b4fKThLntQ9VGyPLojLV1PnjySAXcQGt\nEYOzswY+u6zP3ESfWbzZeE/ow03ady85VrJBkaWIk3c8Zezx2CGOqXvjJ3BH\nPtNXR+uYnLniLNp2xkrCEQ6aVLKv7kzdYtLvWxMixdwItpMXGYS4FRR/ONOC\nAIm0G/5Y33NT3nD0dyOy6WhH/raf6tSxhKxXNsdBXdiUpqHQNCx8vQJDIspC\nv+vVamK2N8A6rjsynJzVN0+b3VO1j1ixwPwpFejJ4D4pzDCKZFfMVuFmVIeN\nkfP9Z5DS0ql8HnHRUAwhKtvdJwks9d4Pj6N/5U/JVi5drhnexc1b4jEJX1q6\n3RZK6pR9+txzQmDEkh8tc+qb1yb8cMLHuLh2d3UOrfZSJyFg3+y3+tOI3vsw\nV0zmisw94/c+jL6V9tIE+yjbd1yyISm724chkL9CbYA0t4Kt91p0gAJDbLqd\nHDNF4dasLz1fJcwVuJWaZwDHGdaNVOm+H4S8v5i4ruMAF/8pRQbsfZNGNY0i\nSzNs6QSFCIoRAr5wiIsCwrBRmIiLXB8SvU8hj0mSMga+Q0ckx31FdhXS62Fe\nGm6a\r\n=O+am\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"d94cc9023815a2b1707114fff743e0d2280d3b60","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220921590","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220921590"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220921590"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20220921590_1641765563421_0.6195329915327594","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209231642":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202209231642","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202209231642","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5d7d498cbb0958f7e24f7c40601f509ae1006cad","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202209231642.tgz","fileCount":22,"integrity":"sha512-THxsqCZXJtT0szKdSK8UbQlKfGb8r4uXcMtgfUzioTvlXDLvscLDLz6IEfb1f+7wJDckoC5OOXvoEL83C2jK4A==","signatures":[{"sig":"MEUCIHZm6pqcoJ1dFlVueq+9hHzcFredOX3EtAdHywEcgEsnAiEA1/Rt43rVIIX684dzDxVjnyNyjklEWAFgtCOcav1L5ww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh22zxCRA9TVsSAnZWagAAyIAP/344HZwVTDxI/QbOKExY\nMiqaW7z0ddMZ2T3ZfCW9jR9M184OMviuafdNfVold1QS6SOP7f5reAtUtBiJ\nr4uklPqWE+Xy11VrMg4rd/zrjOJK38O18c7FsyKZFRypqxEvgRuO8ztKc6oS\nQYcktaJcFCeOBWSqZCDKwv20zZcLbzD1eQnr815uR472HbmrA1aePKXqaAwa\nbyffninXB2GEEgGkxXgaikgjitQ+S8AFZKk50AX6rNqA5nFkJcJuN6n45Bc5\nx0ASUvIp33dxifJss2H103PFMATidfYkbkr186tooLrTWIpBDF/YC1TFkitP\nJD24WL4PmRcqabXBk/XZu/dvYqd7UfbhpqV0BO5d52HlT7WnfOXib3ws6Hjc\ne1iJDCBneo9xDkPiMq8dupbgyeElWFIhSa/frOAs6F4sCJm1qzGwlq/C9sM/\nmo/Eqi7GIJ5J5x+00Y3S+R5YpPx695JxfvDuYp1zP+3BtOOWzyslgSE4wH8Z\nvPipnSfKiThqu+M0ZD7cFnCfubjSA2xqqVw8y++t0AN3CU7R3GfLSW9CciV+\nZWMuDlVybmCmIvNnJ0S528sRzbndZhv53ylF7/XIElR2lDjfTvnfz7gjXLmq\nWO1z/KoquT1j/5qd4Y+wmMICEZzUJviD/I99Rf/PnZ4gAMULg+eodSFBfE4j\nUsyR\r\n=zbkD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"d6b6d38345ae2fab45d444a0e7998b53874e1c07","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202209231642","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202209231642"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202209231642"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202209231642_1641770225567_0.8980201465310256","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209231818":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202209231818","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202209231818","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0e27ba652414c3174502fd0f674906e41626ecfd","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202209231818.tgz","fileCount":22,"integrity":"sha512-5P2MK6TaARy3UqfD7GjMscIfcIvUfnqcQfko5hGZk1qpQ1t17ufKzIOqFDN5IqUvs7u7eYPyGgnqUG8cluRTgw==","signatures":[{"sig":"MEUCIQD0xkHDbKdLoZxmDna82VscwtOElSBRLf59Msj0f93XYAIgdOQWY0Z6lZORSM2B2JgGmFE/7eD7PjT66BzpEuu+eOw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh221UCRA9TVsSAnZWagAA52EP/2hQs3IMqz89gN+Zp3w3\nDPaqHzxTSyOz1GBFTbzg9ycrRcZjUd7QoT95bsSo8ozWov0zIkjM4bHH18fJ\ng+z/H/r2f5TccgzHCfFqKChkP73rnjQYKqSVGrBhTHVd+6wVEwM1OdJj6p36\nhPTl2DgK2iajHB8zrw2prAqK87SHRbpqorqfM4iVJ6klPv/8B4C6O9iuMlgu\nW5NyfS5PcaTkFJWskbP0BOg+WQl+dlQ56lIrPpPHYK9qj5vsEhRT1OdayHUy\nwqSuz/tzDrejWN2kzcdjSG81VFszu7NUcU9YD9FkXNzeug44mbEkNV6W9qdY\nD1f8DINMuNJ/Vy6ovSLSmvbgjekScBN1C7GOxR/zs4OvJ+vEQ5QGfAe9Ie0f\njM3/cFuJcK2wdlilb0Lf2YRCQYs4teB354RTETWcC16CFH+0Pr36yyGPMmZx\nvXF+vq1lCtTDbiCuJ+IV4JGaVAqc/a3tyOi43p/+KcWqXpf58jS6x0J5kIKc\nSZF829WydKdwHWmzv913TwI3yAQmXSDeuO85ZptFOf7aoM7i27v2anFfawFD\nYSb2Ui5qZ+AA2yc6ZObiYaRyvjTA9sGauu1smlunmc36l/WS1etqCJj/Z5ab\nPjM58z+Ri71GNgm8xNruycoBT+8QzLPqbQWm22If5pG1F6flGF+llHGSQGfD\nFNkn\r\n=lXoM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"d6b6d38345ae2fab45d444a0e7998b53874e1c07","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202209231818","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202209231818"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202209231818"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202209231818_1641770324188_0.2640998719515433","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209231927":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202209231927","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202209231927","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"148e8a5cc5ec10a52663e2a73174bb74bc3d357b","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202209231927.tgz","fileCount":22,"integrity":"sha512-035/FZYU165Lp2TvSQWGBT8lFLODBAHgSs2XcvaD0iQ/wrgjFiob7MkSJv21SBootKfjDRmvXiNGdefs4yqctQ==","signatures":[{"sig":"MEUCICd+pRD3acfLi2z1feP587vvMhWfpzKXAjuOrve1kFNQAiEAk6nj+mx9QxL0eKzxHP+Fft42IaUbS3ljFyQAJkEAMdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh222ZCRA9TVsSAnZWagAAv/cP/3Tmv/JMSKYjbzCANam6\nKESry/UksJjAW4G6pLjEMTYXsHgZfLIwbNN7RLjjwrGjL/Nim7/Oa8HAYYxH\nY6SYArhnkxcLvKX6iO/u+EWf35lQ8zFPMuTiuV1VcAY/ep8L7VKw+n1rEe+e\n0oDTzXmPCnc4KLNrPOaOpEi2Zws0nC/fckh0mgwuw9V5UpTaYpB8mnfr4sS2\n5j+us+nlwQ9WlDzNH48pv0Of/Pp18EFFkPDB1f6J1zrGq5Dc4Ra6uylgAr7a\nhMNlqlDVTbGStWfvV9UUWIpvLswAFi9O9CrpThFmEoAr/GBYmpDyXlUSfYOo\n9dHxpS3NlOSM26Dz5A0qj8AwJZ3IpddZFmY98/CK7RhWj57qOsDilbF7lUZY\nEIai+bL6FxyTSosWeITp1SaMhPKRtxtpWfVlECXiGD/WcrDZZadZ5D3ncV3K\n2AOVF7cCdJE4eb4a5KEFziCE9r1XAwTfnNLQvN1M7BRGfssTR+NSUzfg3aI+\nAmtSH8pkO2G86uexWLFM2fWkcugw4G1YKXqT0sJhBCST+/hCItax6rzstHqL\nhxQ367cQlSdjveBcm6cHAtiltbUvFWna9/cERdJkafUcSuRwRWfxSu5iDAKD\n8XBFeSzl+wJysgw5Yl55d2l3pGBfyS41eq0SBrdthskVH4YMfGe2xDLt7nat\nQ1p6\r\n=gpDZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"d94cc9023815a2b1707114fff743e0d2280d3b60","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202209231927","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202209231927"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202209231927"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202209231927_1641770393503_0.791221477824436","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022010134944":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022010134944","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022010134944","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"dad8fd3ec42b0376981b8c2a358eca324f48187b","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022010134944.tgz","fileCount":22,"integrity":"sha512-La7UXMwptUCUl0KHPCtmiHTy9ljbkrk2aMRDCYT+v1k0hMSQQfdz0PEMIpzZNVwUJ0mFEnEZQ1Vq+eKIlP3qTg==","signatures":[{"sig":"MEYCIQC+s0tzXCzsrrNvVrPUhlZGxywZ/6tnjd2+bNfYZkG1gQIhAMwQouqP/PRhLrcTt1vKKjrZnW3jGjVmRCLI+w+Ao8Hw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3DmMCRA9TVsSAnZWagAAefMP+gPLzwslyIrA7Yxy27D0\nJq8LDOSRK3RTrn64LDW29wcX+8uqvA7sTp5UKIfwFY3lLojJEw1sHTuXEvxZ\nlcytR1iqGV46X+47V+fCqWeMabC5OhP6uIqzcvpSEaTDgttZmrdidvSIRyZZ\ng2dvZwKgL8hi4s1TwNGIWSFwcbiPOo31SK3BBJoztiUMPWySf/81H/tDgNao\nvyv98sevnxozbk+auKqF64BLFLv7mzL6N0EQjQcM6RJVEJNy0oTo00STpgxi\nIefgTX2BP8ChkmQ+MOar9+z34rarEnBleRJOGI5T5N49fJuudAlwwRgS4o93\nJ3RpWTW7aqdF/VevOkHLfVvfWmRATh0wA4XbFmQFLIZjLi7Mru2HJbNdwl6l\njMp7jSQU16PgntLIxkkX9+DpEr4cNnm7VJc/ahE9HNOIWjyc7t93kq9BZVQb\nduYwpIRdstGC4kfQNvdwJ7f1j7LdcK9N107oYblvhlb3ZjmzAhQncqINF6Qs\n54Kmmqs1h0/pCCXjMjWqgs89aVcArpAw3ANYI09bQOrKejANmMBgZMRVRhJE\nJpk/NV/tHYpcLTwrORqP4Y23AzwL05c8GkZz7okndm2MhykZ/BmHh6KQ5G0J\nB8nqI/AQsDFOVVnl/NoGOTufDIiKTomDFYqBWvYCWBhuQCzCqUg+egIqFsgU\nCjxI\r\n=9bml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"6a3aef0f72fa67abf8aef80fdaf85aeec520fd2a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022010134944","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022010134944"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022010134944"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022010134944_1641822603662_0.16014606677289733","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201013510":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202201013510","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202201013510","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"46fd5e0f0beea21d33ed9fba18248b69a0a12d19","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202201013510.tgz","fileCount":22,"integrity":"sha512-PSf4re84NTyc8E3A1YQ56VE3Bs62jXiEJomYv/3AoxGvrx/JbLQ2Yir075bWwyiQ27pwsDMSlj18qx0nAv4ezw==","signatures":[{"sig":"MEUCIQCY0s97ywmAMuAx/Y3KWGnEf8j44Hp4jle/MLPO7ZJJ/gIgXsn/Wxl7sRM4x40kLDYzEGtSIxq1VoIMp1h6L62AtZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3DnaCRA9TVsSAnZWagAADF4QAICHDPn/cC4BmA1VS5Wh\n8ZmOOeGYRq9YCWi1GWJsnOh1N8KNslP/r2DOI1vIxCU3ei9MflMET1UYKBe7\nCx+mnOcfMPfcG3BIcbfMbIRNQZOGGwTUsLlaihOMZPclkrwSgEuG09e+Iejr\nxmSatUFtqsS94y9a0N1zajIXUU+ryHaufHGB3PIVH51TB3FrMYCxQ5L7VrHL\nY1uwV+XPi4FEQdpqcanXc1I8S7mMBiJjIdTcMDFND4c7F7/fPSNZKxb6S/Ou\n1vcjtda0mIVHqjrN8C50jzTCxqpMnwcpXfOrsbOctlhnTY8bLyqYqXurN+YK\nHfr18MxrPK3slSmmRxp+5KA+Bq4RYVLVz++CvAV0tFZ1y8cSLYjedc+qJ4xn\nHcI0W8Zf1LtwdI0cz/DuN0MD9rbxw671BAXbCHCvLx+L3EGmAkiH/u/z9cha\nh+DGAg6OZ2+K6L9RM63OkzdmFxpz4IEkGAZWqLq+6P3d7Hf722iFqLFpIXD9\n3iGX1hoirpCvDLy1Zy/Tc56kySrk1joWiaEXEUGEGKrqAJOnVS1CYtfUdX9o\n9MNcW1K9/3hMGwnDMj7eLdCkTNjIedKuJeCLQf49dIAONu9bAj97sq+Ka1A9\n+KYXlxAeMlEVY+XrneOofI0sgHMvUFpvpQe87jFTrGKRG0srpWfIIhAVBBkE\nqKLu\r\n=VKpE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"6a3aef0f72fa67abf8aef80fdaf85aeec520fd2a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202201013510","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202201013510"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202201013510"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202201013510_1641822682733_0.6736849620902343","host":"s3://npm-registry-packages"}},"0.0.0-pr-202201013538":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202201013538","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202201013538","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c261a8b6070807d96dcb596e87173079addd5201","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202201013538.tgz","fileCount":22,"integrity":"sha512-k/gaAW9hYe+KrYQgXFBNKJB+f/3aAj5OvnWr1YA0q3Z3nA/y7sVN4EUBPGginKAXBMYtbo3BnYRn1vfZMZIWXw==","signatures":[{"sig":"MEUCIFaa4Dt2puGDtVbqUwL0d/k+a+Q4FHxtOqyTLv57CWS4AiEAw/5mIDbD0sqVNbwfWWDjcM4yzaH5+le+FAAEuRYC7wU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3DpaCRA9TVsSAnZWagAAmAEQAIiclfk93jwlsAjqSVaE\nsUlxIcbmDZ5xJ+I9T974imXQZ4gHsmyfoxDatWPjuP4emmPV3F/TA4TnhD6r\n6AQsIgdLqQyizi1YJjD/CyLOd2fG09kGHjyYMfKu3D1MOib8w8Jce5iEKOVT\nx2z2azesBnG3vPE5mzkNLUtROZHLFLjQKE/8yQu3ORBYWT/MHefY2X08M4CI\nRt7Dq0Gx18oLEJ3SoqF77oqzLqp1PLjueIFwc1lkXdg0q8SwYCFW5eGG9TdR\nYKBfv350a7z1jHRZqr29QjUTNSos0U21D8sffrqpTvn0C45caZcPo9gMklhC\nUVbJufX3CobBlLDaMWeC/jvMFhR18vX9U3+mqcao08cjH9xFOIHTRV/povL4\nvf4fV3fezwWn8QjF4G0raIk2R+K8TIFRugJteNUpL8Uk4c8MW+dSyft9EbRt\nNmSs/g1SI3mcU+qJ9kbId1HtWLmL0bFJih5y+Z/DWWJInPoKtXITrw/9Z/jC\nA5PGg8T+lpfz07YoIjc9VC337g/KcmlyeWkUz1bKltxZUzsyCnFdnoDJISd2\n9z+tRuL5fqz7w2soP5i4QWwipOp0pQ8MhNpgwnCa7RnXoaiUlt0Urw22fz+P\n3ek2hzg52XLfLezt9gjH4zPcVncMNYQ8y8ElT0lOhqST32v4GYcHtKeCZ6kH\nlDPw\r\n=G7et\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e1907581faf50b92f840816c8ff7eac72e06cad0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202201013538","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202201013538"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202201013538"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202201013538_1641822810607_0.3546126629243631","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201117413":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202201117413","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202201117413","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c480194472cdb710e66fb5aa42608b02d3db1470","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202201117413.tgz","fileCount":22,"integrity":"sha512-kKj0OooZOtBmp+N3SPdH3N6CuVeCwBLy+2j+hyCGl6VyLBv8X7uCdqdGGw+o+nQGB9Ompou6A1dTIlkmi2/4Dw==","signatures":[{"sig":"MEUCIQCkDvWaW4ChRtDl5mL7iUMUVcFPnx0jrHDouEfEhGMNcwIgAmSh7dJbjM/XT+MYR33cNV1vFzp2vYK852zUlB3UjtQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3cFECRA9TVsSAnZWagAAZwcP/Akvbb4zKuJPsjpw3xx3\nmWBtTh71UN6gmyU2oRM6PtOwNobCVdaqOffvtqvVRMmJEFRG0xBFpD3EZt1P\nUQwFmW/bjcOvKOapvcG/4AWxFN2yNf2aesaWoDsoSmglwIL5R6eIjL3XOxFU\nQ14EQ3pmbU/CaMsHtK2chh0XYQwLQLA+6t49mU3fM+4j8aEmnoK+mtoNmh9U\nZTWqYpkh/4+5XeL0qCN7NdL1p2J7FwfphSoXlXbUwOvTCxy1d2C0v/Nd8BIF\nSEZV/GzDWrZLIA79RKIgfcHo+SarTFFsmQtgSbMiDFXYZsWSu/PekjsxdnvN\nrvpEw4BoNLMbmzVZ+AHdXGKZgrt3cWETSsEg6pNL0+Y3YZFXSN+B1ftay79d\ng7B7a1W6Pa+JezuEjCbWU/QrVtmVttrIDps6ijvCQBZybzNkaoQzuWxhzWh9\nIVfHn2gzgDUAmqN2zSlOELRZ+YrbOIc8R2Qq5H7acKV9joRW9MBcE0g4l1LX\nCFXxhomzeCcvh8ffEX0RfHEq9xMKVa5fN7cMp6KPIOnv4PZsae1abFssBj+R\nFYpt6zQXDJzuJA4oV41kgz/oWjVHHdYSXyLs4WluYH9HrdAIWjvOU/V4loSx\n8+15VFFTNFmt46RL2Gky/nSDWZtJgHXTwjaOQp9IGlpepLtc+nuIHzCO5a2R\nW7VB\r\n=Dx/O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"472612e7aea64de64c6744365f7d5c6a97bcc438","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202201117413","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202201117413"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202201117413"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202201117413_1641922884858_0.9189022906084412","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022011175644":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022011175644","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022011175644","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"eb7eaa4b848bde49aa8bfdade4dedcab5ac0c389","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022011175644.tgz","fileCount":22,"integrity":"sha512-ouoMCJByok/hs9wIXWEDbN1IBOJzv7+SLQwShKZCYBrj9i32upo+DJzG6HXoQhBbCg+lZ8MZbqUqDj1dcLoi4A==","signatures":[{"sig":"MEYCIQD9HYdh2DdCRp8+KwUB4rWp2zlylgnwUK0M7lghhTFBqwIhAP7WmQDRfHObwbbP3bMAj1Ywe6CqtJ40ZlOH54y+Hmdc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3cT1CRA9TVsSAnZWagAAiE8P/iyeM1ZD2TVNSZpeR3n9\nssW/aANiOqIWRjiZuqmY111aH32eqFT3p1m4R6wtzJncr5soBy8nx/UGPoWw\nfuVRRjxGSYad562fR4B4F5TZV/ci/Z1/BpBm6MWSlYhrq8mlEUDcZZadbMBY\nnIpethCjCwh1u66EJWN3wfDUSGDjji5oZ/Mawc7Os+CrmnUGC7FaKm4U9sjQ\n/QLq2aIKSozGw6usyL7adBCHfs2j05bEU1cS0GJhOWe7Wbt/c5bicH7gldv2\n7ZKWv3khtRcce/9f2HalB9R3DOY6aredMFJkx/3kI4kw4xqRETOuhcQJuCPF\nmq6Pz7ZkdbBX8CwLIbOFOrtmnIrc5rCB8QVv6An6xelJgh2X+AzT0hp+GhAf\nd3nQwkXN7ugGr5eNhNnJ794WuyySRJFMorhfhHrcqFrxtVVFlj6wcZg6HEOk\nhrDRrquDPF/yASDrEnCImfRJzCLc1zXCTfqdOaJSwjGrsRABkqOohGXB61Wm\nJPs5YD//nKFQpx4kgtyhwGUnzX8FgoJrDfn4QfcMWh9y9jTPWTUgBqsC3RIr\nTMW7uxNnRH50dtYa22Vw9FyNhlGMTlnrYMOWy6tzHLPbK7yNVMTWOFHd+QX2\nPzgBJxA93fcHqj6pI6GbayzkgaGjmjahYLUNDTkP8QYdmiDcwxuzmk2KRC4T\n5Agp\r\n=YV9l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b4db89aa26b06e4a93fdee1e0978c6ec77b9f108","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022011175644","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022011175644"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022011175644"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022011175644_1641923828951_0.5868091312689891","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022011182024":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022011182024","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022011182024","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"288174fcafdbf01a0451e8bff25becd0d458db9d","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022011182024.tgz","fileCount":22,"integrity":"sha512-2lpaAK+CD66Hc/pJM4L6ImCsWAzmp1/RTWviJVs7N27kjokr+mLai2HbpqekqlIR78+oTZzmltklH1670uEHCQ==","signatures":[{"sig":"MEUCIBZeV5ykITb1NMuyUJTynI/W/HsP+d7Owifx6SvamZ6SAiEA60BNsGHSLZhkd3CEbuBx2BcFTGs1uf6r+fjg9DE9MZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3cqCCRA9TVsSAnZWagAAyU8P/0QWzvb/jTmOwReTOx5j\nlp9TWK12VSdESkYHSCsclXTmjghcoKWjcUV6SlPbmn5bLkNTa2GTOoaiZrGU\nDAhGXDhd/mcuU6yzRpOqYASsYyivwpUz5LZ3+K8wxM6V0T0yqRhogHf9i26W\nIzNwGWzpBlrWuujVRJWo4HkREpZ0r8XQzU1JyHD1Qdyy7JZcZd05OZ6MhlQE\nbitOAF/Bz+a612Rj9obHXusw6OluXRrGrrCGRKpceO51HumfC/LOzWOA4vRS\n5hnjbMdT2ECepKcysdk865iHzjQy1io69RR1GlB9FWklk/VGhq0HKWxgXBHd\nP05e8gW9HU70qui3AZDNBwTHou2YnPjbbbtYiRnXVrx9LVsbB1mxiyDeL+IM\ngWuiTAYZ6NC0ST7wEu4ePbWIWH35KDTTMgQVRDICjDBMaC5K28Ku/uSjqJFe\nXamazMJE/aTbbBvzKl9Uwtu4ZQxWFyrsOv0fglVE4RFpmhbHLg6DT1zyYY3y\nXY+B43od1DpgGwjqL0TDSGEK5K3tRV8N3DnbtIRtiXe9WIoy0YCqCdkrqmT6\nOhx1Ew1WEeMxg4DGOVjDsrRPojE6kyoG2FooZChpCGv83Pz3JfYl/eSgc7+O\nzIoPHUQxb2LlNQwEsku4mMMco6QhB2G76R2/FLi22IYklzvdzhg7oGbA7WDe\nLgt9\r\n=wtZt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b4db89aa26b06e4a93fdee1e0978c6ec77b9f108","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022011182024","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022011182024"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022011182024"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022011182024_1641925249888_0.6247835664679193","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022013185957":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022013185957","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022013185957","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"28dff10e704a5463172c7ae240c8a38445d4305b","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022013185957.tgz","fileCount":22,"integrity":"sha512-3HYiEMXGellQ9QIBbCrTwBOSfsGc8eCxnVT2vR4CdqKX9GhK3fOXVe/H/Ku9mgE2IBfbTmhtKsPPrc+7qx4ouw==","signatures":[{"sig":"MEQCIAvNcWSjjPzibol3tN6cTgmYAzANRX1NExe/fGiJiHliAiB35sNuWnvuhhNRW4ap6NSMCpdbD3DsM9hGy7onNTF96Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HbFCRA9TVsSAnZWagAAL0sP+waZRF2IMIM5MGl8+CY3\nhwxAdvn5s1fi45rsOAC6DNlw9FJ0Mi5GeblE4EnhEeyzoythyjDmYiwYRJ56\n+aL8FKO7nyMjVRPF4ME+niRGQyFf8Qo4VP+GZpvB0kig3YFdE1Lh58S6jSRw\nkNwnJM6LIJ/QILQiho0o8qtEZk8Pq6QvNHSL9yDyewBtAREBMdRq1ZGqbxNg\new79ge6H2yQpbR3v1UT46UyF3Q6G/TuCog8LD4y/J77sUEV29ZE1EHcqXbK/\nGpy+wX4MJx9XpyPMb7I+pUfrSxpv3QuirA3C8Y17eh5tnGa1+Eb+/EWMtb6k\n2m7aEercHFvAMlE8PlU2PP+hSNDAUr/kUgGJccgBt9hyJDIORWJpzvPTybDv\ntBq5wmbISJqVNwS9LSFxBMiDRdF9HOmCly8wZMKcta4S4iaQI4KDbspwSnfM\n6u/t7axZ6homL6UGEtr8IKbIF4rJmmAM6gdv4NImbWuYz1A2hjmyk/hrX5MU\nQF6M7bOmtdBMC3MR660U81nlTSJ6I4Et1ujnc9iSt0WuLdh0ae4tvG0AkZff\nB3iBVql/b9jXysAsfy45zx3Cxm+s/KbVpYirkwWvUh7lwjDjAD/hcVFvL45B\nZUMpG7qvG9snaLE6KeyXaWTCK+1duhyCLxmalywq+ea9YVwrOmQycs9wzPIF\nM+D4\r\n=pn6a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b667692b8ea9ff144ff54b789a86077f1ee1672b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022013185957","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022013185957"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022013185957"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022013185957_1642100421218_0.9927676168128843","host":"s3://npm-registry-packages"}},"0.0.0-pr-202201319022":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202201319022","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202201319022","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"35b18e73dbf477629b4fb9a7f66a4a55ac7d3251","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202201319022.tgz","fileCount":22,"integrity":"sha512-caKJW9asAtzPWJskWqhUNX4u+dXpRNOrHkzPby5SrFg0ud/tqlqGlLQyslXp4ishT5Pt4oy9mR9Vjbot6SCo6A==","signatures":[{"sig":"MEQCIE03RmJo4PU+VxfTXYLpOlvAm/5B1swcU3d+sv7dMC+fAiAcfg/X4Pv2/mHHLedLvaCENf+/gzaxoKfcehgW/ugXfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HbfCRA9TVsSAnZWagAAd9YP/3byzlE3cpr4NUc3edui\n/YHNkQOI8Tkn6aqwLf1aFhRol3hec4IBcE2IYurrVI1etwxb5CawVuvb3cAY\n473cb3UjRs6SVLHzBoa4YuZQ8aw2fultRj2kXYS9Evln8g1YhBy/e9WbM8DT\nfkFwhNZh04ZYvBtdA2Rigdanvq3mZQvpicXaafL5YawMPu0P+b0LhT7JqNan\nQYgztZJl9FfaVNNc3OTGf+GKIoa73/q3GDZraNv/VTRpfiBqS40LyOwd3yKz\n8d9U/ifjT+iuKWRYz2ZIniel8/6lb5CbR7zgTbBLSfF24rkCnyvijXm0kOFP\nw6mIpsUumn82qUO6Zcfq+vaOonBUmnzRycsmHUezQZ3r7Bd1ay5C3o5131Ho\nQAmJi/gvnB5PrGU8qwW7MUzRQy4wKcXS6Mbh8VQA2gpxezo2F6iLOJ6PInwR\nAY5fHCXRSfbbRnolHebY9SN8WZc0IhTsPqB98oakP8hxpFpR54ZsSOLxUYf9\n0i07vC4qAk2eaqJpItJUv1KAAgn/065n7onwDDTG1kn4Sk862azcsK96aR8L\nhVrn8UzkwEO9ut2YXLoVmfqI0fIAXAzqv+fcGD601ogVMNa8kxWo434WmESI\nimbaEQXykdNlVKx4x4W/GUPsyM/ll/VFGV0LOMo7fQMwmVJrrZ+y3Af+93HG\nMOSr\r\n=I3+X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b667692b8ea9ff144ff54b789a86077f1ee1672b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202201319022","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202201319022"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202201319022"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202201319022_1642100447625_0.44859495143412453","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201319130":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202201319130","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202201319130","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"41aa806395020ee2150be67705185d9c0a8f176c","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202201319130.tgz","fileCount":22,"integrity":"sha512-oRKAFUEzEiKwNL9OqRdUTnf+rCaHiU1+MvbsQhn+wz4HUbxHk58I51P+6wUlZe5jb05r39AKtaFh130/i5xqMw==","signatures":[{"sig":"MEQCIF98LLTKXFs0iKYcsYDukkSIYaWnpPGgqr5A2bqpaxJMAiAP+wcCHx9rRuEsKabPAwkDVnq8PyueDEbcEC+Oyrv1tA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HcgCRA9TVsSAnZWagAAK10P/iMYTp3Fyweoh85++M+o\ng6B++64L1F1ZuIOIvxsMmGfT4TzdQLoC9mfF0F0DMp7OssHIi/bgwXOd+/CG\nbiyHIt1yh3OohX+gYC6XFYTCIrxyeQP740DnlWebrk40ZMSldGH8pVGo9+Oq\nwHEHETrW0LsfhZIZd0mzP/321vVPYhiQJbfBVTV6fxZ+m7F5Y3Zod7HIusys\nSDrfYfdZIkP+juKTxGsDaMiqIBU2J9aX0mO+MGSQbAthlR2EtGhERlSSGMxC\ngPdWrB5oD/qNEmF+34wWwOsCjmkmNT/Dxzkp8q5MvJC6nV+npGWno31A7ScZ\nrGi/cbVjhbifrs+U7JSA7SfWVpXGBi4b4uEc3zn/tNsYHtbGnU4Wc20u5g9U\nsVg5vwLQYMGxgbUlMCpMKlRzFj+kmdq8wDXXgNqLEduVz3arr5/SEU3MU7pn\ncOdLUsUw1bN+y5yOyT/4UXmtqpfVfVi3bqU2X16KknPM3AgvqDCVZpqjE8vs\nLuJSvRsuV1L21QsmTypjMgYq5J6Qp8FbWKn9S7XwuIutSGDXES3l18+DDl0C\nLx/eCIGR7ypsDu4zRcCtsxjHPY0825Eub+tCrh9Xwl4BlH/TNIYMSFR0w9at\na25+65cRjtOeEmh3lSIYxEkPX+S3Ig5xFXDlvU1VyW2jIgtyEMxftGkJoK2i\nOvHS\r\n=Pvy+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"893c696cb259ec46a92fe0feebe12ec3e3e5a67f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202201319130","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202201319130"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202201319130"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202201319130_1642100511902_0.8208842075810034","host":"s3://npm-registry-packages"}},"0.0.0-pr-202201319211":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202201319211","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202201319211","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"85e3774e3ddee87bc4e4ab30dae0289e891a837a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202201319211.tgz","fileCount":22,"integrity":"sha512-rv8rYRIjspxsx2lYwY/Zve4hTYThoSNJ2ymPSn4+iRHR8nlCipVk/q959tOM6cyhQD48+CcxhotczptwZpIqDQ==","signatures":[{"sig":"MEUCIFikoeNTkifAme5+iSY0SqfLIm20WpnDwbMXOYorANKJAiEA8MQme6HXMLUOYYJ54RNGK1urgWfp6EjZ9RYYgJ2kZN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HdLCRA9TVsSAnZWagAAdS4P/Rcz4RjxoiUZLF3D8fKZ\nZzcvlgiLNcD6ZAhjKtBYKfIpq5D3mLC2PH/WA2u6OqNX/3SBNpPJ5biomzhB\nD/sSxCvRr6CNEoPkJV/vPJpD15X44/1TwqetQThabTDYDqKkyLnYdXfCXJ4F\nOaSnS+YiYiDigbyLifxtej5sJ/pijdDorENERTy8ssjP2SOFRJfGPYbCBJ55\nD3paXF5KU6ORk36MB+GE3H2rPF8gf529cKlnoHaxKsAAAohprCfwzqiSujfQ\nOxUcM+13oy0IdFSr4kLlu0jXkeFDmZ1Z6ZTabsJYc+B3TP18xf31GhRm+Owy\nDfIEWrCt576SSVzK0Og235jyd+8hfQqp6p2s3OntLNnYOiRlo0n+41TcGOrE\nUouYF0vvC+0pWzc5O1wryCHnAKmv4+l/s5MAJuvZ146ypDuNNQnD8FLfnJKa\nzvYoGliKBHkHr/V7ZdrgMN1YtOHGBQk4G/XgpHBQYMNGRzbqQkoFdJBoY9vw\naxW84F0fJPbV4cPQSg2/cCLcRxwTC32EdZJ4Iw3VIvtPiFI8XyTcCnRHqbBy\nSvXY3smIDUsnYYylbnZYGYV+zt5EfHzEOGrAdh1Xw3SkzHUvIAgmqaXjSvh+\nwMzo/vd+ScUqWxtof5uDaaV3jRmryQQjvzwvZ5KXchppvkLbrxtxgLM6XP6a\nEQYI\r\n=UNVb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"893c696cb259ec46a92fe0feebe12ec3e3e5a67f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202201319211","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202201319211"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202201319211"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202201319211_1642100554786_0.724401660157663","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013191557":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022013191557","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022013191557","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f68a32866d5a738280c03f857ef30b886d1e3de1","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022013191557.tgz","fileCount":22,"integrity":"sha512-Yuh0+2Z9nYVDDk67AsA4jRA/ZYPeoDNOjzf3Prh9uMruJ9sxSznEXEbbLK1cK2D0xxX9NNQnZfZqGWOmRxrGFQ==","signatures":[{"sig":"MEUCIQCBP2W8h/6JuC5Q2AsCylqaSnGjAR7UYbr3dYi0C88GOAIgd1Q8Pm8TF+4GOh8g9rsFzpwxjZhicV1G/nA//smlP9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HqCCRA9TVsSAnZWagAAYJ0P/21b/WONKAgKjf9QuKZP\nWlkp1o/FfsUvGSxkC0GlgEc4fD8OZLuMkkR5dB4zO3ZohLjQSIrCVuUkOAqJ\nZBswBdM1xnnL1fsHY4Rq0Kqj8jZjGNVeE8y42CHfaWnNNkklZVVNuag7EZ1N\nXYdi64xrQqoKyysrI4jN3MqjhCUxDf+RsLOJY0Ryy1riN7Aw7d7JKYFcT4g9\nTx+98xk2iibZ1QIoiiYWs0JlAs1QSYXtKiFV+DHqiuzbioyUPQPql/E0gCIC\n/tW5n0ZPvlMN3VSI5PMT9DV/YoYCXMvLQFvq8z1uIn0Tl4hZV0zWyI9Rcp2G\npOC5MvbXv93RD+1SWOMWZLWdEtCph7Wjg+dOaADNhmz6LIYMzspV8GsBqgqG\n5JIO89vuZDGdi+3m4jubhFUy74UodQB/6bUT/1Mx8hfUXybLtQdz/NPb2mi2\nIoBbWv4C70Zo/yPi9XrSyYXDGwYcbaoU038S34rKneGrtozRCUiLGGFRkThh\nvZJn18F4ss9oBBLmCAnWFjwsLiwyGhsGHiJ8Mb3wLlDzuD0xNZ+TSTETuCpR\nQLnBFGRVmWAPs3fIrepO4dIwhzx0bXp84oM5PJY7sJXtj6jH/jzHq3wCLv8E\nAv2QoGTk8y1q0sLfee2AJqRYBmKyw3PdLOPsu3iTDumwX47+zx1s8VvbSS6G\nE69C\r\n=I0zL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"a6219c93bfc679948c240931a962dbbf1275d0e2","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022013191557","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022013191557"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022013191557"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022013191557_1642101378261_0.05833942174528772","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013191627":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022013191627","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022013191627","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"21994d7f7ccfe0bb55e2a096807b2cf7026bce96","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022013191627.tgz","fileCount":22,"integrity":"sha512-DwUQfjESDhVc6h04G4wzZHlivOjxatEYNVDgdSYtmeGWhvdtCAiZ84enyPhC6OzCNJj0aS5hxowXTbLzlbnCbw==","signatures":[{"sig":"MEQCIHm5PWSyKcsomRmG2f+OEKC9hXEttCErJ+dQCnmBW/slAiBQmnLaXiV3nPX1qtkKIRU5qbBDCcmp0blxicYIMVG3Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HqgCRA9TVsSAnZWagAApx0P/3wnq4zjnKfBatKHLm8C\n7XM5KpiGOQX5ZcldOL/c/6tO+1Tz2jU7S10/dOx1eozuARuhwRuvGcCGRTBZ\nh2FhzTRuseadADZvq3t7+WgMj6pt9HyKNp24RZbC52SQUmT3rjcJaG/49srv\naOYWvAlDwhzaGPgL3TcDrJ5igp9kVUuicpltrshcPY4XJ7ekxxYkDpv+hVTe\nxyuKFUbeusAFFKFFnj91z1T/iZgHOaKOGhATN5gipIsTfRvYNsVZCe6gdkSw\nyFN8J0KdwPC4i6YUg0Hcoidh9JuMAWFQ122Lpz5t7gnILu0112VrDeGO4zI/\nBA6xoMFxAn2TnzzkJxphH0USKfrfc4aQ2nyb64Nnm94viamhcr8US/69dDwP\n2A2kDKNQkRq2VfQ0uvsJIj6rfBuzmaG+v9mJBBu10SjgFf4fovV2ayzuy3CJ\ngW80O3sGxv9WmG+RuKfV7Xs4LAN09a4y5cJCTPogVTEFxsCDIYtbJGt+L7zR\nHxHrxMHyikPbwb8Z+k3ioMpPe7Xr4lYVBYel4hDah4cp1qF1wklCYcarJ6g2\nIogz8U/6kS55YDjTlLMjKsE4l2hfq6URkeVid18x2XDpZL81BqtweUjbajLP\nGdq1VIcdQGrTdkq7CgezFAwquJudy6gQK9nO7uUBdM6NiN4QSn+uF4y6h5qr\nNWz5\r\n=RyuM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"35cd42c5e934d20b58adfe0a2e856716b73892c6","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022013191627","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022013191627"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022013191627"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022013191627_1642101408655_0.7222408238357727","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013191632":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022013191632","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022013191632","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"be0e8cc7facc756f782273c4e104b05d93e61606","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022013191632.tgz","fileCount":22,"integrity":"sha512-PmGkun7yYyWR84FbogFnT8aCfLrh9VTvsJYQE9sILBUVhZP14uxx8FQ58qi44J5Nzrp7JV3l2dDf2BD2IuV/Ug==","signatures":[{"sig":"MEUCIAzZ67XCf3KBzwQSR+xhgPlth5a50eOvxQQfa6OygAhGAiEAs1LKmYr+PO35k92oK9HjYcuCxTpcBY3MP2CgWihXvp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HqpCRA9TVsSAnZWagAAduEP/2D5+k02QfI06jo8M0gA\nKBclvPOi1FB3ns1MsZJ2oNLaXVe+tfKhNOrrwkaGO46gAxRD1n3IoDH95t25\nLQ4NEgn0X+mCQ9ZSjyiT1V6s1wOlcWumfqHEhl9D5GcRfhLQ64d1Nwg10DA2\nlDtQu8xKJYIHb9d4pBJ8/YP5hfwrdZFoPIUm9MdP6jzt2+h3LW57Nb6O+8ar\nadhWG9uDwYkNtpPxDXn6siFrG9hvxMsiPe8XS0ch7qjkoMDVwacT/t+iKfp0\nsKlQGkuRTrQtRoDjOiQCgL9a/XIaYBIrWw1g2E87ls6RiZr9gO5kXykHQYe+\nBBWyOxk6CnEKVkpFrMMMrDH/j/6f0NzLRmHcrwxgQi/CgQ06pI05bEUhyK3y\ngSlorITrOnx0V7L6G27atBHVvI+DOC6XuIXXHBY65HqO5dGW5hsUy9i7s6fW\nIow0PQVQyiOS7m0KtSoo8bw+rymUtZuj+rUVhePpFTeM9bGvIs4Bft3X1NKC\nTy4PAOOQiwhxg2U7ToDPn3GvixpP6Q/uOB0SlzWmTesLktMG6kTRXX4zRekx\nAd1HKAvyBG3Vz5IRy5JXePqmG3VnWx6WuBjaW3QeUqKxujFisvr5VRSQ3Bzj\nOslfy744t2Z4gPQ1/iSeGd5Ak4sR9H+XjYGUzPxK9CCKqCX18sWggDtkGir/\nndAg\r\n=Abwh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"d9ade3b2b8c64e5194f2678429235ebf023608f7","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022013191632","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022013191632"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022013191632"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022013191632_1642101417032_0.16416496369515143","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013191659":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022013191659","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022013191659","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"558b75dec4307a6e32819e8c6bfd5c7b0c9d8225","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022013191659.tgz","fileCount":22,"integrity":"sha512-8BV3XUKxzJHoW7nvvYCge3njwB6sb2gVfTC/to3Un1lhfHqTgQ1fuS4FR5NBO5vmpqKu6NP/pOEwfqtq2vVslw==","signatures":[{"sig":"MEUCIGiiEfgU50SQzZwRD55hYMKi3LK0DH+5rCtXtZVe+9ysAiEAkUr8RtaraT6dW5XQWmygZ2i26m/q4+EGYXsM5canOKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HrDCRA9TVsSAnZWagAAh/QP/2l4mEK51vjUpefidDfx\nxqx8zoLM3tcYYb1YTBHqGHuBOYyPwXKmd2RQ39CsL0BepRvCQWeogXHT3niC\n69qv+v6pre5auqJPcwofM111gAW/cPkxnTOYer5XM9Nmhptc6Hi9KrwknT1s\nrBnc8g9AACDU8qLcB6KWl3jQ6HmkL93tPYp4qG2ifyUfIfIcrT6XL8C7c85j\n0Ka5eGFwljUVn2oJZdUUbdb0BLeEDdFaZmPfJLeOIvxWsA2DGtFbnqJiQuhY\nE4nyR/Jidnqe3Koh/QDuSs69FpV3iSsvNT+p8v1eComACGzGRlnk3aFyZqvy\nOeeem+7409Z+s1VaX93Wz222BCHIqvtEdFwDta3hrPnrrZKfXIj93/t7NPpM\nz6Gr2I6BaGeNgnyYgo88KxYXoypmwDtd1GFWkXrT96S492lYUuE/x5GEFxfe\n0pt6thNWMsfdJMCJWfDbtKtzMr9bNayc85Ta/T0UYJNxG+FugNRhuB4B/FAn\njBLkUdy9mJNcYTIp7zKazyeuBxqprIajuBf2Esg7T2RHO+wP4vdGOrAEbOhy\nI9GB8ltoadZ+ZZ8b+GsNUpg+ZvJUrBU1W++Suyy7ovIf+C4HJvIp6Tzso7g4\nfFbmQAF6MoMZv1GzfXIq1ndBHlWKr3OsOaNireM5RMBksj2YsM9wducrvOZY\nendm\r\n=MBhw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"7c48a61f8c08cbad295a35be6075bfd36a403f6b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022013191659","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022013191659"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022013191659"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022013191659_1642101443711_0.8329332337614295","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013192043":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022013192043","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022013192043","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9b187ccb614dbd8e6963ed5709b77ce6061e0229","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022013192043.tgz","fileCount":22,"integrity":"sha512-S1Aqhd31oFRvK1mExPJqPRDsl2jqMKDAxK6W2FfxJcAqyBHggyYP44/b1jQ6bQptpGvYeEMBWaqDuxT9bmPacw==","signatures":[{"sig":"MEQCIH1kiPM9NhNIi6gUaEyOxwrMy8lrW+DtPnX1Io/pYKjvAiAujfGsiqUqIsfnepD3B67PStiWrw+OdzNPRixbG8SjUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HuvCRA9TVsSAnZWagAAoVEP/3uCtWl2btueFoiZrRvC\nV6Iu2Db7tzcwhh9VsT6As+AkKTeOy9mSOGxYxfSg8YnC6tHOV2g0EInXM8we\n5FrW9Ok0svee2li/gw/FawQIbjD8n+qlpZS/usGfp492R8EIzbdRARzoY51z\nQ6vV5kuUgdIcTrpAd6/dCVIwTPNU2HVfQrliIKH4A0RUV6VU/+8n0UfeUymd\n8G3vVutCVMA1UYZ7HisrRfNm117Yw+Pv3hwRbxdkBA4dp2qZlOa4ZUH+6+vH\nOZVkJ+nWtDsBLBe/fUpQv0f1ogvl88tgswzrqR6m0ZYkGssLsuKIAPGnfR4O\n3R03PhHgEfz+4g+v7/MGmBjFzcEabnyl1jL+knI5GMg4bGwEAzvWDSYF1wIH\nihUzBCalCPAKbHT2+OIJT159fI9EUhZ+CROqd9wZEQulSYnKdQbGzDmNbt63\nGlLgzWaEBZ90Yy9UXtKSX6s1k6Y5nWrjW8P/2jaCrmDiFyv/CRBhzSd4s2mf\nCl3RulmM6YWgqH6o+eBG6cfxnbcfn9FhXAFf5fG6jJtxhjrLvHYTBJ8mOV4n\n+ZOekwGh6gVPJFuqk+XExLClGFI8QUeej8heOm8jrpLw7KSIY7Ytw0WmerZd\nRfbi5p/WBZRKsIFgLOU63JZD6hQIK0FCX1G/0/LW0+V86RVog0JY57h9N2Qz\nQhxk\r\n=nWWY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"360fbe69c665cc1b33069dc660bde05a8d62c16a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022013192043","@chakra-ui/hooks":"0.0.0-pr-2022013192043","@chakra-ui/utils":"0.0.0-pr-2022013192043","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022013192043"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022013192043"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022013192043_1642101679496_0.9120572293786873","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022013193154":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022013193154","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022013193154","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c9b2b93f8bf0d5213668e57bc96bcd0a7da2c889","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022013193154.tgz","fileCount":22,"integrity":"sha512-P2H9ef0R47PjyqU7sleKIGVUw688ZwWHC+VsFQUwSwmSJHw4PXgANg5fEr4zoyKdquVymALWepAFcr05R7TigQ==","signatures":[{"sig":"MEYCIQCWq1bclsfgiou0nPe45xZB5SRHXGgIhyZWzYmUPg503QIhALB4yDf+VkNsaaFsKxk1q9N7yesnoteGOGD3RtEU3I9M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4H5DCRA9TVsSAnZWagAACXoP/imiS5GU3K9xQZwUlRIh\nscGFA1rDTM6NM9Q+JZlq4dnbzGgcPHYSDDUCWZTGXQqIVgRFvopkBGOGKVRo\niWsSON2mb14JaGW8kiN6y5d+LqKvqxINQnytcADcqdED2pXe+rowY7xEuIDK\n2T8SvQ94hkJXgoBeTuHUAHRV6skcBTRmSbb+r4RyeqB6EY/oyuLWCiBxmNV0\ncCcbfwc8ZEdquHo+KHY9u8JHtIfVlPHc/4q9kQXMOsjznbg88TQ8Ipaa/n45\n425Z+hKE/39e1hQOdkj9hazByR4OQWZuzYTCH+ONgZSeXDHFoMIXTkdl9XxZ\nWh9k7Pv7UviCkeyTlJ2SM9+vBNVkbqg4T1mMWCNTnpD1UmtfB0+XoYT4F+Vy\niF82+2Lee7UJQGItt6Ea9vrvRWtFsuXZ2dPKum2w+JHw9U6pD/xxMyClCxc6\nFRFbKrYZn9plf3f+HUR5dDc5tdX6BjK7nLsbTxA6AiBGV+z6zj9LXhh8v3CP\nBC7jRR6oWl5/pSEppZ0eX1joE18oRbyO76MdxTj79E4GoqsPlrdp4JJyUZAp\nuDrC8WaOWcRcMVf+P+i5LKVdEZx3hPuoIY9nlYD2NQWphNv3dF6Y8EkoSugw\n+nfli3UcriIa1dqUsDAj926NtciYN2iYSXdJJNbuF31voBm2y3OP7EMfjQEY\n2KNl\r\n=FREr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"5d796ed4dab53d11da1543a78875858eb272968a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022013193154","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022013193154"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022013193154"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022013193154_1642102338926_0.1067161307921285","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022013193526":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022013193526","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022013193526","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e97618ab7aee7d0b7f573de2477592b0e2bf27fb","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022013193526.tgz","fileCount":22,"integrity":"sha512-EDRJOJewEvV7WRQycKC+kuGF+3nD7XibQ9bjWQ3zWnXalW8u6o9uyD3yMVVPseGNKkteP6eB2WUimdRotr52cg==","signatures":[{"sig":"MEYCIQD17skAcucrXyha5HBwi/jpadIjcgfG7tYT0Te99tP4lwIhAJZv7WboaS0AS5A1IxHWs0GabAvbqQ3w/BKz1mEiRlId","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4H8aCRA9TVsSAnZWagAAqXQP/jvGswfgAqjUSR5q3JUm\nLeEssq+GpxM6FB5OZVPK5TRO8zwVewk8jOCNRi9yJA5PtVpN+MRVcy4EBGBC\nQblmLtu95CbEL4Fxr9JjIwkkhRIxaMo08z5Y18qYAsldYhiB4Z/ZfXgulzVW\nfiVaePY1LG1pKRJPU1q2hz1M+rsC5Rxt9xOriygTTNYYwITSkw3tN/K+DKt4\n9YKpNL4/wbm8unW0BGO/sCLmOEXiuPxivO6AgIAAgzL1fruTDP/7PKshZW/Q\n2Q8xcxVD6FPpQSnyyYwzz/u+r8eVnaGb3tYIQhLZLPR02qF9V19cJJX76z+g\n1mNWBhwrLR0EdWNEXvdy14Mpf2J35r0i6gLw7P0SzA5S3KS5JLDlbN9cu8XU\nZh2/li7fAEKtdUJ3JCKI0Pg3xE4tSrnsLlozPqfnl/gjCmz7Lx0UxU8TLRik\nfP/hZgsNrCPfot410g2e0KECeVlHtWE3xnfeXx3p4jq4K/B0ok4vwkIgYN31\nqvZZgpjVe0oCpvXVeU65ryS9Uxz6gl7iNfagJzSU+E+kHrWghBr0sM5+tp4c\n/lxnh/j2U2oNir8ksDjH+1tT2NoWqn2S2dVt/ua/+oCwdh/xivQWWkmQhCbR\nZ0hcIAyCPX3JL9idYNXPIPKkF4F9wu8tLuzbbLmx9oDSPazfkE18U5O4lv8j\n2rCY\r\n=RSqS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"1cca30b9d40397762e29181020f5bbc6e06989b0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022013193526","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022013193526"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022013193526"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022013193526_1642102554183_0.3369992273610398","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022014102532":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022014102532","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022014102532","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e62bbeb997dbfeaa2aadf73fe36267a921e5dedd","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022014102532.tgz","fileCount":22,"integrity":"sha512-USlTbi6v/pgMjYG/66oHJqtUMRmptl1xLN37vHnNg3dpO7eG8BHS02zG6oeQ/bqsjFw/VmO81v/m8vbNqCzEOA==","signatures":[{"sig":"MEYCIQDMgCraG7oCmVa5JI5ifjPWd7gDFPhXQkKhNRg387hRHQIhAPeVdlD5lMgA1ef39NIFXOZlOaFGeALt8smWa51QKJIg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4U+2CRA9TVsSAnZWagAAVEIP/3z3TVuu82+eZZHJoPSQ\n5W+iS4Ihd2VnK7UrUDpKSCCcdadji9BJHezlccpFN0W7RI0euoo17qATR7nZ\n6imSljZn4HZpnsIZemRhGlDpbFjYw6vAMyrNgrtcGF1PC17scm1wcN4cO7nD\nyRzNZuWIAI5Vtu/ED3s20GVtumDnKi4EMfvcw7nFr3wanQM/q2iDAWTaw1kQ\nr5n4jod1e04uwS/PaVAA2dE+Gz3YoE0+ocdbAGj8IQVfuAETGcKZStexP1LI\nsK3iIVh0g/PnxxiHNiW/WCIW3vIUk7dJMCjxXNqYox+j6AJqhm1sO3u0wBXX\nbT3lr6s6SGOKwHFIr62D470XoQGQIkWPNA6We/0aWPjnZLpuoQ6daEKnigpz\n4bDmyn0uEMIQg79GEHOYr+7RS79oWgumfjIZj/4mjYOyBF1avCd13CaQqymU\nnFWpQUgNPQQE09Fj2qiO5ZjiI5np6F6Y8q740ofqHWmOUgJ2sYPBxJVf2v2a\nZyBU56TSzX+IIT785ZZdTDny/CNKErG6rBeB4kdhgjkZkIa/Qnz0oRaIiS0l\nKk1nVwS22LQ1je71a7voBAU+v8V//ouA735csPUilB7hufyD4rCVAEReMyJH\nRxzf2ZYnUOjRGXmXmAcLHSeIjdT06or1NZKXA8xQbKN2idBZcnaCu3nAOhj8\nMFsg\r\n=bL2R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"52e1ab1af187484c3a1695d1ca32b3bfb083ba59","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022014102532","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022014102532"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022014102532"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022014102532_1642155958048_0.060960874766764706","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201418849":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202201418849","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202201418849","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"16b8274367baeaa0990fa9828d85dca50ff8654d","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202201418849.tgz","fileCount":22,"integrity":"sha512-iV0zZQmz0Vq6S5AtLjXpEJGcOdlfLB3bTRDRK3SpyW8WW4vcCyAbobGwnDTWqE3yNkjb2Qs8esXsZ5+Eu5dglw==","signatures":[{"sig":"MEYCIQD+pzp3ZF59hhMo5HuJJp80RVXVzYy2UcYkHjKfhPPihAIhAMkGmv+y4DDJ+hIJH71kp7NmzeftGGrRbZNesFOoFeuX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4bxOCRA9TVsSAnZWagAAUG0P/1knJ/rgnIzzYZmgV3/B\n4+FEEe9C4O2CXmIBxnQnlHdjgznfLsE+1bflBwVkPIDo/ZFo3POYB9lcZzv4\nbyT3ZEmdAQ33D08hY4lxEYszhGcUPmUAseVLvSohkaT4Ukajub9t2OAzMTTQ\nzriKhcGL7X3ZiypdkHGzfKNh2nLiRebfvuqIojEZ1AIMyzwJRvAt64eAFDX1\nQAeRxs3EuMugOvRuGrYw365Qq/xL09xq5ou6ZBmoZCUN8Ty5CD0hhRhsIsUX\nzhNxSXg4rSK0lpD/GiKUZ8/XiA/l/57AxgtyJnlE8nlpM2877pmklKAhs8De\ntbMUfN8i1OcE2thGU5AtHSgGSOJ769gv1OPnu7qvWE5pbofflgcQ+GhNpLIc\nUURbhwYndfjImxlJiNwwgtCKV4YNsEchfo+AMvQ9t3DYGlGtcsdpuTFYst9s\nH/Dr9mcCXejzDV3OdMIeo0rjD4kd4zq3x7bod3UojSUXu/py1zkKSu95s32Q\nwcScOKRMQYubmUuj+7v5lr0gUFPdfVpLpf41Mja1XUV1dM/I0zddRkuh+thu\nXTtUz689KcYETf3N9Glu7WcbM6EaIPMSme4lz4ZN4t0cpox0G6tBzU+D1hlL\npDGRwt3K1PxZmMHRZc6fqvPfDqnWoYdU06nGVfcXhNuhXO3VAO6rrp0xTu/N\njWNP\r\n=DGZO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"c9c54aee1e45c2ca96f7c032400ffeb06c57e341","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202201418849","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202201418849"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202201418849"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202201418849_1642183758193_0.9910674485434992","host":"s3://npm-registry-packages"}},"0.0.0-pr-202201418280":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202201418280","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202201418280","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4be9668ac0a52b3eb72b912e89de1dff4a6b2693","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202201418280.tgz","fileCount":22,"integrity":"sha512-CF+IIoWpNa3S34SaAfqf1lUnsCeKgy0vMvYURRl5QYNdhTCLHSSnmMg2geGWSNGRSHRnDWfEtQz6/wlbtxOl1A==","signatures":[{"sig":"MEYCIQDnWdNDGD2+HERdRtj8vIsxMc53oyvxQFmIEuGUQK4oFAIhAOvxzS5Hn+/5g+wMe2lNNQWqy7uot8z4doCsQvW9gE1S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cDVCRA9TVsSAnZWagAARg4P/2SoEvMtyPxAHGfnpSoV\nvTDntVzSn+rRWc8JPG99d6WT2xcoJGWnNT05AWvk0PFo8/QLNG9XAkVTIbeO\ny6lcVyrY0zl7qBYUnqCkDF6bWq6anraBe0RDoq4qd09mcE715rScKtSXlw41\nFVlq6E4B3FlkuTpBbkaUONmsbW8XbK/xhgGx0HnLzaiKFKwf3fGnVi+0yexY\nmY90AOg2RS8zWFAO8kehuM3raishC3y+ydSQ/lbIrAYFRMN1O4l9H7fB5Q5Q\necmF4J37INYTndrOuWPU2ihhWxgLiB/V4stO45R6rZ8/TIEtA4FJhHowTKkx\ncHt3RTfYF7fFYXRp9btMyjFkAs1csD7RN48CYw0+UCPyaapKrC0CpL/qwCJk\nKppVutNR6WIex6ZJ1AkMaxw6XlJ7tj3RnrpfUkWZCSeDDrIu1ntmiGMDfRnQ\ngnSFaltvLQOn/eJS+cDDoEYQ7nuErpF08YWuObOmfeWbqvhETO2iby8B5lTA\nXmFpgUM8a+R99yuoyTzL3si9hh6OAJT9DucAFa4e3DIyNNqB5O2LrHUfjlL/\nBHOgTCspHsk3EKW3VdVThXCNaReF1f8FQC0IjeYTo6swWrjuFZvIskDe9x/A\ngU+nhj3Ed6vT4b/wwfq6gfmbVfYcTQrqOra3wRUfSa15w9XoJ2b+c2BM8hV/\n84ma\r\n=/NPy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"ac818e4f791e510a42decb8bf76f75343f2d3329","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202201418280","@chakra-ui/hooks":"0.0.0-pr-202201418280","@chakra-ui/utils":"0.0.0-pr-202201418280","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202201418280"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202201418280"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202201418280_1642184917152_0.5210333140542733","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022014183133":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022014183133","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022014183133","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d616616e672714255c4be84e89f2a682b8fd436e","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022014183133.tgz","fileCount":22,"integrity":"sha512-KJlqy75uFVVFAh0gbnlY+fd/4Ol806akxsOdihEJrPCNZJS4vemBiq+SW4q6tXK/MXVFaR2yM3eYUl3YspqM3A==","signatures":[{"sig":"MEUCIBTgL+TWTYPy67TboFGRUwmefMiZZVXiqGj0gekxLhekAiEA6lO/NjNVMEfNQYdE1LBalznyuso2iBlv7fMNWwNwJuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cGsCRA9TVsSAnZWagAAl+AP+we1z+z+2hi1QbWDPQKH\nAN0JvXFwucQ+9c4lHld3NFlbA8B0fzrjKD0dsW1DI1B7ax7gHp9r8FHYBusp\nYWky9mWy9OFYZHoJ4NccVO0tvIbXzvMJZcIujNinB+6yBmGODnraoi+6JPu8\ntsMhv6+I3LQg6CkObw+OtQk9aOZ1RrbWLUlA3KXeV3MfboXd5MLwl07u0XVS\nwkJydDWSQ3UiXLAY7k6ci68e7FBnpR5r1vpYFRdV3vqXb47ydtoEc/b2U5ns\ncYpYS/IzV/MP0YUNMubARvK5+sHgROR2gHNSuaPjOoH+rdTSad8FYCAiqzJu\nkarih9cDyF2hbbWBP5uDuBWcblX8sbZTx913ssZnPgvefViikSiTfCJLKchZ\n5pdfT4YgRvmUjEzd4TBFfd1Hzr1/79/0XRg15tNLnPYoNdHPWOFjNVhiLq4f\nKzLU4N+k+4mX0g409AK8jr1ZFSmX0YrIf4sJQBFWlDvzjxoIlXt5CivPXquy\nKDCPxtTQtaAF/1jO4f4HnEcLlTBi6szLtVFBVSC2a74fn09Xo9opPIgcu7Fy\nC7iBeL/F9YJI2BAUPdpMPrRcRsn0+1Cft2eneq2GIGG5CHJjObxgwDt446ep\nUTLq8sv/TT7HBMIcoI4ttSG/Ai5tT5uf85UKfhljQxxLhDXZZ/KPxoBupKph\n2g5c\r\n=Kynx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"ac818e4f791e510a42decb8bf76f75343f2d3329","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022014183133","@chakra-ui/hooks":"0.0.0-pr-2022014183133","@chakra-ui/utils":"0.0.0-pr-2022014183133","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022014183133"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022014183133"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022014183133_1642185132820_0.2806516759123321","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022017182645":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022017182645","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022017182645","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"65e85630ca7b6b08864decaf67f98a1402a215d6","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022017182645.tgz","fileCount":22,"integrity":"sha512-lnDQdTBUkTH/4kZ/vwENluzoQ4qRROgYmynMgChMB8APN1xx+vpjrRFiyppRWoqx0We+ZTZtfAyWNLjC+oA4Hg==","signatures":[{"sig":"MEYCIQDu0ufvvditqup0eu57KiZr/+epzVMBp+wP/n4/mF1o9wIhAOwK4TGwi40WoHekN9HvvD0c0Eniq1bGXP0JBpIOTrco","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5bT/CRA9TVsSAnZWagAA5o8P/jfVtsr7T99WOu5Ei9yK\nm53vL8CIX1c3ZNFbdvbHtQnFUBvI3A9zw1CRLIG6Z+yqGHzDpEGCkX0vF+k1\nzhRPSMlPTMTV0JbSCXewRSAw/Pv7r/Ob34+FC+k7xO+LUkOnbB3Y4IcMSpgC\nLs6gu/wLhGBD6GD6O0m/yUhVG+owlzdt11rU53yP9PP6vnH8PvnKTZIts9cN\n+PywukLpt0gK9pTjmK37IH02dva3n5b2xE8Low3N4Wgoka12D92ku0hSiyFa\nOBnuSBEpe0/v26alwLg6eNLRenn7U/Z0vYK3VQwaJVK4d3Rmv+OpFooFDpt/\nn6JYvqefj4ovDo3012QeT5H/FBCKa6ElLT9857JpEwXVWrVi9U4R/vwbPFE8\nqYj7kqc7RR8tH7bCj7sMUsx0ic42+GwzPPzBf4zXGgExpFiOnqjKm05HhVvw\niL+ZK94vvUXNF3lXmA6RVq/v+wXRSOl5KQQ08ist8HUj+UQg6pFhNAVSt4v8\nqPzBiP0Ftv/aegUNESyixMyv8aJfeas+rqBZoMIQPj9f/jWYbJ/ZaW8i/Smo\nZHlY0FkL9JSC5B/Vnu9PWOAzUz3Q9fzn91pa1bhujLQ8Z7KvszoidD9tfmPh\n8AioRFLFXJJBQJo/ICazbSHtZhAKsujYyiKMa2rSUlUdInJJma7ke2kksuWq\n7Zfg\r\n=c3xL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"8956926a2426c08d4176513be5054c66f955a3aa","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022017182645","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022017182645"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022017182645"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022017182645_1642444031038_0.3048930339363205","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022017182859":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022017182859","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022017182859","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"234bdb5d7b7201c5e2dd5e3a43ffdd856d16e76a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022017182859.tgz","fileCount":22,"integrity":"sha512-Rt0s5TngWrzBems40LKAcLPG/U3wKoOhhXxpfGwnFWuQ6EVb+V63QUpQJ+U7ITZ9jvoItfhrHEZXIuIPUpZIag==","signatures":[{"sig":"MEUCIQDwNeUnUXszm9zmtN2b8IIQ0cbE8jM5GOldWLTmVZYstwIgeZsHUZiA06bm2elyzCSQUl76iXueEaqwzyNpFfCdUoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5bWICRA9TVsSAnZWagAA0H4P/0vkXk/l9/Z0CDYT26af\nl9y/8sKg15lWjDHhhu5e68+1La6JDoyfMDiS2Q12L8vdG8ZD132OMkayhfha\nK1+IY5Hw6t4ufAkDLc546EIgnHvMITKzh9Bpj/+irP4gg292DA7Ms7Q2lCcN\n3KYbc5tizl50oA4R92/0n+FF6jsBmMza1QSJzgLGf/HHdxV5b0pBeECTLNQd\n87mm9SVV7yD6poXzo9+pZinpn3JHC5MTOVx7gsqcX8mu+uftPhB1A9ImsfDz\nuUW/jNcaW1Nkolsfo7pQSIUlu1vOAbVHlTSRh5GMce/oLvWzJZ6w8QGrxY03\ngCsLhEKXFVhqHzMIvoWI88/saLqkSFwPjysRDVpSZb6MyjQxCkxPhteWOgs3\nsBFllBB81+P3pkNb2CT4wsN8/SH4hmfpscfCWt61EZLvtsOTMPsdW9g9v7ic\n7MNxAU6NubxhukiqOCW33SGWgtI/0KUfaJAiHNq8NNuaD8wYOe6o3/oo/i0g\ntvL76Wl+EEK9ohhikdv9RlDBqt54KVdnrJgYoCWd5ZLvOuvJtS1TwaZE32RE\nLk6f9yY0WIlhOMjl8c5OjybAMmUziI6DZqSCSXEHQSjNvqyG9UfaVxD3cVZF\nTUFsOz8hwP6sJm5Cu4t7Lz+4IYmQ+SLffKsEHHqnPypeaQ9SqaGNleou4lTe\npxeV\r\n=/Llx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"d88782d8af4d8d6bbb988cac1fe65aa2c58e2a88","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022017182859","@chakra-ui/hooks":"1.7.2","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022017182859"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022017182859"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022017182859_1642444168206_0.6685847191090737","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220209527":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20220209527","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20220209527","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0e1e62385990fc8cd33ec17c8241f3cd0c47a06e","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20220209527.tgz","fileCount":22,"integrity":"sha512-Cx5s1DzFUf7gOzGfGo6Td+B6LpNzGzUEUQDmlv4KqZ0Wv4PHn6FAaV4VtodoNtnR1a81sO+T5eAsJp4DXuKctQ==","signatures":[{"sig":"MEYCIQDySh7QrgUL1JKxVdeEl8aUhEKELbOu5Vem0sEoTQJ8lAIhAKnsMajoPo+1wM7lQL5KYXPatDz0Gex/r937PiUcTmfu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6SX2CRA9TVsSAnZWagAA6ZUQAIya3409tszhNXqrmnmN\nXWWX9GDAhN5YnggVBkrojo6Hxn427SUHZvopILFpearkcNrAwL3cMs/PrURr\nkmfnhD9IYzbQexq2MTVFHEnoN7NQ5LMeDwPnNMvgR/aCKCBss/ibCkToVE9V\n/YFmg+jRPU1hMCffGXghpLD+KhDvLf8AEKkxxElkmoaZFhfcpPuEwC8qCYBx\ngt9DE7BaoS6kiXOHrlJR1yqV2s0riWK7pBg6B3A5B5CtmAhUvj7gVXzABTzE\nRwVhAz3m9H40M3y0IQFFIk6+cu9n+1mNCKzbZ+m2nkKYkNAReqIvAskKSgVQ\nSDoFXZISC4xN/qYTdXo15tXOvPlJugv/WrTQQyrsvs3+vnEIOX42j1W1a28v\n/Z9eKZMdSJwyCqOCbb8fR9Kjrm02jXholXCPUbMVLU/onmP3uZKfvJVoCrzw\n5nj46NI8eohMP1T7iCWahlwFywhrR8xbv2aSWeaYtUmcjJ4ELmtEbhRdTKOO\nW4/aKp+fsDvJp/HFdBDmjyKLDR/ilJFsmoOyNYJn/GitE74s7Sk4upHj/LPx\nuMZ68PVJ1MW9pTcGmvJi3WQVezjuvKtbUQt7eUT3z6ocrZxzR0zlj/G1cPGi\nnS5X00+PbMc0tsgdvBlw0vJolfMjaskwMBWQlhWnp38ZQPweJ7mL1i+h1Mxe\n1f0/\r\n=UpyK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"5fcdcd7a00feaf606214a1eebdd43a9dbdf27e59","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220209527","@chakra-ui/hooks":"0.0.0-dev-20220209527","@chakra-ui/utils":"0.0.0-dev-20220209527","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220209527"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220209527"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20220209527_1642669558094_0.31326835071059467","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022020961":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022020961","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022020961","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1fa10cd0d0ca52b3f18399d12e34fadcdd719443","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022020961.tgz","fileCount":22,"integrity":"sha512-prVzvmP3E3uZuW1kWQ9pF7zBytABpX4vzOZrG+wEGQW45Mg3Jq2AWiyU8McQcTOlm54SFvK8qvURmO11JiKvOQ==","signatures":[{"sig":"MEYCIQDf2EHjblin39zImz0BO1sDX0CRNgLRcn7p64kDPQLzUwIhAK6L5WNe4vocAVi+ulyYjIGpnAE00qk7vcUZSxnDnmoe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6SYiCRA9TVsSAnZWagAABdQP/1wkwxMFjPTbtShzps5B\n5TNrb9Qq786G6O+O9Cbx29N8S23RJ31KypsZixS7JQWLhYpVcvHk/o0w0Crv\nH9EX0fUksJlt9uNmvzvehJ1FHS9QzNQnOwHDUGXODoPBsayqnLo3AHpU7wDT\nIkEhNaPail6tEyr2RWFIpASEsEsP9zSN+MS219GSRjn9VkKkPVS5Sdmcoq7g\nJicWbvajCFqMnad9Hbqaz3dA4B3UNkel01iTibzJ6zfkzHDXaCzpfy/4hVnA\noGAh0vxMbl9kKi6jOqwiSoNbH3xzPixtFqAiETsJrTLRy2sfsitKrOPt2DNl\nkZMMeJTWbvRjvUgXIUD10p1ycpzxG5x5pc/w1ku52xYdkA8q7wTAbwbpuxK3\nSMtK5hSAqiSX+FGJqSx30KNHyh0+01Bf4uRrtltrnOeBp+uwMlbRfFTTVZ28\nk0AITJgNJEi0cjq4Od5hjw8XpK153v/VbbtEU768KR1x4+Wd2eq0KLUDQApn\nWnLiM2Zf7igTdfEZajIRSUwNTms/HoAOvagciGZeewUi3AfX1NQD9yOJEBtz\nJX4oXhrgGJSV++3nb3bY9LC7EFDTyxq/zax5sEMF0ZXP+z+FD5rpNVnWcuPh\nkajd5Z7kEexWvbR91Eky/3I4UXP+jPHOkxCFc2pa8bTvWglYkHQNcuRnX+cQ\n0xxn\r\n=PTy2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"5fcdcd7a00feaf606214a1eebdd43a9dbdf27e59","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022020961","@chakra-ui/hooks":"0.0.0-pr-2022020961","@chakra-ui/utils":"0.0.0-pr-2022020961","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022020961"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022020961"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022020961_1642669602598_0.8548680526307679","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220209192":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20220209192","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20220209192","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8b5e018124017967b74087d1f5acfa4b695862e3","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20220209192.tgz","fileCount":22,"integrity":"sha512-ei5OgMPFk/9LKapCDRJuxtfG6dYYl1I56+nvBpafBkj510ToM0YcjPneQD5M88l85P9DpXZlznc8aoYu3UdtdA==","signatures":[{"sig":"MEYCIQCbUK+LpUHbjH3es6oGW7D4p/20R0uMuHj9InXh4xkl2QIhAO/lPTqWSmxRlzxin9KxYWstykKNyNfnfIh7bh3C/Vc5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6SksCRA9TVsSAnZWagAAfbEP/3bRHZJtZWXuGzyyRM6Y\nS50q3y6it7W2ipO63Nno+qB432YPSbaxm+Rj6ndMlv/X6wSADllBbdtWUFxr\n/ovh5Mz6Th1+eiJ3oDTYd7AsM5c3VOLF62bfJDDQE/+1TBAgerufRww+KtHx\nZFpOHa59+faZhpkcNHSjHVELcoPut1XNUUQH850rwgJXOrWxLcvFvo+fbMXz\n0pQmLZ2KsSRD7sSgMsQ2w8//s1CPaIt40jhJC/27rqQs4UuRn3CclQVI9rUC\n/bx9EYmXdWJu0+XmJMb1Dq39SzuM1vIYJ5zBSLSMx7qGXlvMvzQUrsd4PxMs\n9ulHqDncJOKo9IueMUTnpWjqshPd87an+tMNfNhVcz89hlU6j9HSTMPSIt96\ngZIiq48tJlNIuLON7gjl25VwvZIn+aBFtyegM/1ChbG5rsLHjHQA70Li7JVo\n9HjEMQr4Q75mVNIoJDZOa/Mn0BansPgVJ38xJwRG3CqI18n8LJP3H1D5rjOy\n3A/shLt+IG+qsiWUZe2Kw904TRB2Vj+jF+5Btp1m46yB9klK8mRvleiggSj5\nCmn5gJUnPGGIo2zBtvzS+fxF+BuFeWeEbiINa8J8OAisrQYkLfBtP6J7Kfaa\natmhfiYvM2RPv4UAfAs2Q9TUHug3UMWXQnJ41Z/cstE8BlumBLhnO8iuCFYY\nNfya\r\n=pJKU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"90204c2ff2fdb19a376737d7519135ecbc9794c1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220209192","@chakra-ui/hooks":"0.0.0-pr-20220209192","@chakra-ui/utils":"0.0.0-pr-20220209192","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220209192"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220209192"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20220209192_1642670380245_0.21189522286440043","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202092345":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202202092345","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202202092345","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"43ac3374122b083ea3add0c38f5c367f22bbdb93","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202202092345.tgz","fileCount":22,"integrity":"sha512-sp/VExmZc7048Wccx9tmy0KPgARKBCcxANdJQHjM457aK987oNW5j4ErK18hVHkRFr3smrpCyAuQ6Ga8xGzKyw==","signatures":[{"sig":"MEQCIHRRf5Ujhw/caH5qVs64KM7jcrstXoBjOU9ezZWtB8/IAiBuCRtKvzuBd12flMM0nqlci0X/X9v8Wo7Kx5ukgxsytQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6SpDCRA9TVsSAnZWagAAp8QP/ic/FsdqHFmgBMLob0pt\nxQDCLHW6QNiI7nIvjNaJYzLMzUQ9XBFJiwiYfC2SAHV4kpEHwUstHefFDgLh\nn557L9tW0OishOCy1FwulS21oP4B31NK+qIVdhY5+cw6NRz7mNe//L/Ypu2J\nZ6ZG6ixE9rlct/ysHqL563WyMfeSy/HO9Z0IRUsjk5otc8tEVpoqbvvvlbem\n2f4//FovMCj+B+tFhvokD2mcU/SmMfRCRJvh0UO4oh3HCZRwyhKTuLaliL2P\n09B36deLbPjKxGme707Oj2idJZugnG2tSeq6ukxcAer/Lk6evSVM5HesoSqj\nyXXKx850aGEcvu6uUHzMdJkZtO5uFp2W2C3A1+AtKYDGA9JME2+GSTLgzqRS\nhM3KJEVmThaA5UQnKRm69umB4dSGA26pDu/4E30CB3fLuK50SaGvAKKvFHhW\nCX1pN2BUtPVLpLDzl3pnxc0LkGPkQSlC0zYbp9IP06ouPPplCU90wjhyuYpf\ntqBHd7Y0Ivu+5m7aqpdnqgVAqZQ93zy5kWjLpHjwb8JuMnAzDvTAsjj9f6q3\nzAH4EKQfn0k6x25f8+fVTrgOtDUqfYOw3uekOSW3d+6XHoQu97gwFTbu7f31\nKHfJNIzZ3yq/vOgpCmsfxwdiqfU0+0mQuahkiX9ERgY2Bw9CdMC0mxdHv8s1\nIC3w\r\n=1p+m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"dfe50d3b7b06b49149b8b57305bff4e0d8d486f6","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202092345","@chakra-ui/hooks":"0.0.0-pr-202202092345","@chakra-ui/utils":"0.0.0-pr-202202092345","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202092345"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202092345"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202202092345_1642670659598_0.6973289022405313","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202495259":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202202495259","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202202495259","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c34dc6feaf5f6476b6701dd562ff80e8334fb0b8","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202202495259.tgz","fileCount":22,"integrity":"sha512-IEJJjJDC8hV63A+EEb7jbO/h6TLzLywxRYpmNQjQlmAo5YqR361YAZAMt0Wz5uqbVZqEenww1GMIkqzFAY6b2A==","signatures":[{"sig":"MEUCIQCHD22Pe/ej8yl5VULJ6ExiX1b4pgJ0yyl74sCIsP+b2gIgdsvp9v66h9finoSUodgW5HLJ3eHK3y0oE01j/Az5ajI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7nchCRA9TVsSAnZWagAArqAP/R9WKh8TJhe7R43hBKAc\nkzyQXONxIjL9zXe8HcN50Df3sMYo5B3YeEWYnvPLJtGB6uP7/PvJ0UDT9nuD\nO/flTKOjqhPZU5U3+Q4xwNImry1mDwsvhvyXuT/Qq3ZSJvkPei4eeDB18PA1\ns+DgXFh9PURdQVCIiUgV6z8yMixM+Be8zKJnS3W4xjZrN8UmseT7O6kl/s2F\nsoDSk3vP1562pznhFnKwpaWRXLIAYTKQJ8r/iAkwKuK5TZhGVLO+yLiu5HRl\nFCvZQWnGWjuQK9ScnqOoXiZJjcBEWQi9btnHHpIk181tPMreZmZ2F1sD8DTW\nmCKT0/bFTTwJv1fXTIKarbxAmHIFZCBVoSoMMSwfFmcDUvxs2ld55T2xFP4y\neJ6IIwyPoBhZv+A6UkL7/fXNtwRyfq82soDY3NdQHX5c+QA4MiISKYLkGHjs\n9dy0axzMN+FDEg5id9e/xx0n/C8FfiBtkzybJUmZkQyX1Le5d6AXGm4lVyRY\n970hX7ti4Yd7FemTmfCzj16NpTUEoIwr4URz5aq2AEOKIVyS9rJBc4wQEKpG\nYU5F9KOcyOBP//DsDlDRWy4NVB8TaC7Q8yMjwcCDfpC3agxTRChUf6FF7z6Y\npGZVjURHczniV/9TpoBoCQxZXSyFMxW2+Xd0anemlIMAwRtl7Xowfli9Kou5\nAnRJ\r\n=8QYs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"cb7bcf297a212523d5e01079a08757f49b76e89f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202495259","@chakra-ui/hooks":"0.0.0-pr-202202495259","@chakra-ui/utils":"0.0.0-pr-202202495259","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202495259"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202495259"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202202495259_1643018017602_0.8794499168017518","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202495536":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202202495536","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202202495536","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a6c17263f9069fa71c0b5f143e9c19b09141dd83","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202202495536.tgz","fileCount":22,"integrity":"sha512-qXMPP2OxVq4Hwf1D2NNaApYJPVSHg1n9BixZgbZp5Bom5ZZ3qzayyadBWgdgzRzRFBAMrxU714K1QlT8f/mghQ==","signatures":[{"sig":"MEUCIEnCnTa//8yA13iWXIQl5Aolno49+cSQvF1fDGdwlLHCAiEA6YnAbb9yAjQuZA43FUN6MIR9SneJ0VnFQxy+NcERySQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7ne/CRA9TVsSAnZWagAAw3cQAJHiy0ma0tjYvMX6hyUv\noij5Njy7txpT4gzqiui9QQELJbxDiMuVz25C8OJ/GeHqIJ0ogD1ldxMlo1ok\ncaYZ6tPlvxZ8FYzCw9S1roHz+UOQdJ9u66DZvo7dnwTG18vlax6mV85/k8Gd\nT60lSclZwRQ+P0BWzRuOIOgJeoem35vcwGSqgeAR0Dv8pNVJzQsvxIO2QpHA\nCTnjyxl2hoLZ8lKXYb5K8j7E+WvKeWu9qLdw87pTlETlo4BG3Nw9lVqDI5jy\nfiHx5JLzEERfw9l43W4RAf1vbl0zexY08E0HHsyXM+Q+DBsxtY8Lo3noXNGe\nxgPtt9iTcXJcwyVPuS4rJwybxy/m+Yma8YW7qImcmKxoSwDyNS2SROAkayAg\nOuhRTioxk79b5oyInTSdI2OeqiocQ5IahKX0qLU0fDS9MN2e7oj4xwXOwGdc\nymmNKEFdAkX7V+jje9lkUhAho9qSxh0I0g/ZxZBrHVdiualJ+1qofmwi566P\nedTjCAAO+pQLlWpc94kJesvFqGo8lfTc/WjarZJseEOYM+p80Q3Aey0OT3YU\nBiedVd6hnDhMvfkl0YKgYBvOoOND4Sq3R1Pr7TOvRLf9WM9oLh+hSFjOgG2z\nZOF10BfkLuaav5yNNY77YEloH9/yzeTs1fRnV372F66xwEKVlxOO1jJ0ixdz\nsrAe\r\n=CC4q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e56b8f644895d420cfabbce11146af62b5375095","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202495536","@chakra-ui/hooks":"0.0.0-pr-202202495536","@chakra-ui/utils":"0.0.0-pr-202202495536","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202495536"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202495536"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202202495536_1643018174907_0.5831716279746841","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202495553":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202202495553","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202202495553","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9e7f0426e01a989776776884310a2b5d28cf6be5","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202202495553.tgz","fileCount":22,"integrity":"sha512-Ra7isvszCgPK+3IrvZWsSbNv1iBQsRqK2NMtUXrXbucNFBGQHN7/nvzHLXbJtcsvAVYrq6o7tn/oTC06Zu2aoQ==","signatures":[{"sig":"MEUCIQDH1u2cQ5/yY8CX09/SlIx0h+zrQJbTEB5qvidzH65P5QIgOotIX/O9qwHlMPifsME0IviCDRUQojj0rkkljgUFgNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7nfICRA9TVsSAnZWagAApJgP+wdniU8fBunaRX/ok+YY\nncdltq5vU+25wP3AFJFdkh0Lzt3CzS/zMNX2N5e2ow6Zj72X3kp4Co/WaGKC\nPqhTKpzcxglf8C1S+hA5Ohm6UifyQFmSdF3rica+Evp36L+vgAJ2cuoHlI1E\nISwC1GPCTp9y383D6uFqDMVQX+wCOevABUZhz1yOgWHLkvmEWLGorRB1eiWD\nyQbKQ0i6tW6QgfvvFkTBtC1Ob4EMe6rNm/5YimI9ufdb6t9bvDVOWlX5rRth\nHyvg3C8PnfrJMM7ZLwpv4oOoywZstgn1BbzBeuG4gSi0iEEaOAuLejFNRtCb\nJm92fen1BpICdpGte7JxXu7BfYwwhnWNb29EtUHBqUFf8KqkoIE4Ti8QsyGm\nDc8Cf6h00v8qzTCzbuVKhsCmL1oc17DBzwqHPcS7JE7qoCFQS5UWRv0qilMS\nFCsB1HOWZaKDvDo1GNG83tTaMSo+lfUDrmYT/Gl7TDO5+bd3c/1ybWOpbr5Y\nz+aiJekiTayJkyMxel14WebC6nvpwfWomsZv9XI+h2/vE5N5s5h/Ynfsrrxq\njZKzR/YHwS/RXZJ8eMplqzEOZlJK++Ht2n/xYCOqu5YHAuCGwXl8T6dMfn4Z\nrZ5glDfhZxkb+8En6/LJzwpWZZwPlmMFUEZIhSv3jG8Up5Rv/T/YvSWKZ/HU\n+cFP\r\n=ZNtr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"d48a2548e718c565a770132e1c27ad2a6d316623","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202495553","@chakra-ui/hooks":"0.0.0-pr-202202495553","@chakra-ui/utils":"0.0.0-pr-202202495553","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202495553"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202495553"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202202495553_1643018183907_0.6211051094818849","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202495727":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202202495727","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202202495727","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"06315af0a00182035a491f247ec6167c09aa70b5","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202202495727.tgz","fileCount":22,"integrity":"sha512-un8TqieI4GlvhVbo1ptCIo7fJbNhYYAzH2DI9eXWQxDTOB1NctL49xe6T/8OyoONTeAqbzvPVrnpJURun0dRkg==","signatures":[{"sig":"MEQCIB3G6ZkCO0jgbKkYfEMupEcepAW1QavpMCxSoS7iMbrZAiBG8PBQmV+DVNC0uglsbjlCPGzSGIaqwvMehu8sy4pO+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7ngrCRA9TVsSAnZWagAAwVQQAKEL33uZWAyeU4uv7MZa\nQ7EWISQtcu7Ua+E5M0pKX3uM5xvqGJ6vMYbTQ4n5OPhewkpg8ceim71w+Y0z\n1Rnzrz/sCJRLf50rFqwiMnDY6Mlp00T+fighTi8DeCBnbhyxH0vzIkv+9AT1\nKD9P2m2jUVeiVmidjZ9cUEVzRvfmr+xWaGPgpEeS/AZNXbfHkuv7MJ/vL9St\ntJYEmvf9YPRW+6kQWVC0eOnINMcFghPWiDuqF/uP8hhBHoW+UKV87h3TnYqZ\n3SvKhHuDAXtSvWNSpsI3ErlZULJwuoS/lokn27AoWRe5qkFu9R/H6SULmUek\nlPazxP358y6uumr47m2T2wrrfUM/eXZBASThQUKnh/TpHSup4alQhYFSUBP1\nnU8muInfB2atXt9eEGHo8S5NdXir98cbg6kCbXp6SK20AqZlf8PBxyMLK0Tz\nagfPLlRMjYaKvB05RDd2cuz4E93hgnkas+Ry5TmTmSExPXCgo44WbON88zGC\n8HabMwoKoaD3Q3mqxOsi9FKsibrqu/IxUCtA6qMQkiftDvvYAheIs4WDt7fN\nIVRDkXSyCBEIOT6KjdNGLte88SosdQG2lkJOEbZ6xjXYVfGD/KKx1FRsrz3a\npAnAvZDsJmuqoTtxVTm9RbopPatm5La/uNt08XCCFJR/60ATfbIjWUbUh5kt\n43Lc\r\n=D5OW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"d48a2548e718c565a770132e1c27ad2a6d316623","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202202495727","@chakra-ui/hooks":"0.0.0-dev-202202495727","@chakra-ui/utils":"0.0.0-dev-202202495727","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202202495727"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202202495727"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202202495727_1643018283492_0.6195509227799803","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202410017":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202202410017","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202202410017","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"24bb14090ac2833fc780dc32cbde9dbfbdfdfe4f","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202202410017.tgz","fileCount":22,"integrity":"sha512-nBilG05PBs/mcTzZcqNfm3oow8kTZ0BqXt2b4wm3tHfJcwG8lKC9oRw8DJs/ceyK1K42/VhCn1ckzY2C507iXA==","signatures":[{"sig":"MEQCICX7rU1XtR6YlGY+M79mtuRVyO+dSsL/71HnAgVh+bEwAiAW5TJw1E8PP7dZKVzdwwKk6VYaWsi+T9URM4MVANUMsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7njRCRA9TVsSAnZWagAAp1kP/RAYAP8FQ1YDeSWbzAf8\nOyojPgzjn32xBNgSmCmN7ecJPbPEy0UTbVmJQCvXOAuEwE0cSke4VB51D6Z3\nLgvIfBgk/FjAPDJQLZU6vgbsIM+gSaT/SGoNhdI7xzNHl3SKii0mhmvzEX3w\naTDc2vrL1jflpuKS+puG8agLsTaup0OYudRDSSMZUrl5ca4NpKfGYEzLZCYQ\nBTF+rlJc7ByS9V3797/dOnR5HODrztpRkfr2Sq1OGpQN6c9QhHbiz2Nb+wZM\nX8FecLZaI4/60I/CsimhZtbjH6iYbCoMFY1f6WnQj9n3tnwS00u8WoZlStPV\nESy1fReAmlT47X+bcRu0BWOJrZ8nbawkgL4CTa/95v1jpg1qYfIYETP0qRCC\nJ/IrdkSaOvHE8e/zQf2Qcg9g74Rr5tYlgMb9j4CFYINzuGIjettRfMGTJQGR\nTUxLnOQWC/A1QcFiDkq5zQfl3mk+pjSHhHdDZLD2gAPHrLoMFgt133Vznw/L\noxI6h60lt/7nH15a1mmIUGnpjVUmRJONfBVZ6e5ZXt4qb7TnIki6V6Sz4IYM\nBRkiJ5Zv2eLVUo1UMSheY5jNHEqdbufPJHJuzWTHwiNH2w6RBGIpis/PB7o4\nUn8u1e7qErw//sQx80MMoIiIFsFkreE/r/KOk0QWxvQlGS5iKNJT0ew7wPoP\nVb9y\r\n=U4vu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"6f63e44a5848d85e3be9684b0f40a64b4e613139","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202202410017","@chakra-ui/hooks":"0.0.0-dev-202202410017","@chakra-ui/utils":"0.0.0-dev-202202410017","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202202410017"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202202410017"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202202410017_1643018449245_0.010746213219781087","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202410034":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202202410034","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202202410034","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1c2c0cc13d2698bdd4b4b02f6e637b7ab02b78fb","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202202410034.tgz","fileCount":22,"integrity":"sha512-g8GMM50GF3LMsNPZTD/Vvu6hzjtm6mgD8cnAY6McsofioEaeUT04fhnEOxXCyeMILxJvSzqW4HwA0C3eWOHdtA==","signatures":[{"sig":"MEUCIE/GqQaPeoNVH/5yyI/BITn8ZKwvoM+hFghc/nsMLDqFAiEA1UIoxfhnl9Ldg1tjv3UZMC2GUvArmxTSd8SfAk0uBYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7njqCRA9TVsSAnZWagAAuBYQAJXZVgV987Pa9XuqCF9h\nBzZwlhiT+DcDEqY75VcSEGixM8MJv8ZJFH/vx9Ul6atcunFgztQ03TcR905i\nMalJyQs0G0MF24Ul1NjZ99NuSxr/Q2NsgUpkQNBVvzfRA5mnGpzuuLRNRWdR\nkpgPJ999zc77X4EkwTr96cQdDLWBnMnpB2JntRtPjOVSuJolMHT7q+wYV0z/\ncTfERwhwm3w92MuvAoBOzcIUQosP2tHcWaVrF/5KZg68Rid4uhufHKIIjUEr\nU66S4FVdCdZcFlydkZ92Ztt//Otx8r+ahoKPvaH5SQQ40lBklwpYTHVUxkNy\nXrtm2t4/z+COYi1N27kj5lWI0PxrCCDBKXqCfZaAkuKGMCTtc8U4ctBv5K6Q\nsuy9/EWba5GrUYz0RMG5hKdYCQuqHQ9bODozvsksimdNxDdmrztKa3rALkM+\nX2vomJ3gvBju54cNkQbrMliSYAfYMqYRWkNYjUS5Upwls69SWCjMt1lGw/LS\nLYwasSOzgBT2+kYJ58dP6n6yj2oTIto0WpxamMSMGXIm5394H+BhLRmq/A+P\nEcqEtsQ9Jn7G+HCLurFeg6v1iRS5/EMU320RqkJ/GmyhPeYA03GiAbpfLKKa\nN8y8jAOX1tOFSzeh6phcqxC4DE46ZPip5yeyG5uL7+DqNVsmhS7pP+n1sbwL\nNrZ5\r\n=IlV/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"6f63e44a5848d85e3be9684b0f40a64b4e613139","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202410034","@chakra-ui/hooks":"0.0.0-pr-202202410034","@chakra-ui/utils":"0.0.0-pr-202202410034","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202410034"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202410034"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202202410034_1643018473711_0.46294005603221544","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022024212254":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022024212254","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022024212254","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5bcc79c4b3ad2ea01452f2b99e457e4260c1a7e8","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022024212254.tgz","fileCount":22,"integrity":"sha512-x/NWrapECxIJB4QEDEEYo6kHAaqk9hnWn9rl8P09EHGzCXz9HE9elwyC+4zGEDodXYE+KbZTqNgaMWsYeT/fyA==","signatures":[{"sig":"MEUCIHkzZQpcKcCfyffoa6YMxfYoisvPDoN4SUHZrX3+ulnbAiEAv9SuapizUahgpu6hae8HhObagO0jsis8SIS8aX4dj88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7xjSCRA9TVsSAnZWagAAxqgP/Awgx+w5cp+hldScmbXo\nvSO9hMwn2G7dSZdS/76MJqQu6XmjsFIqcrT75oy5Qgphm8fAHIBe5HeyMdtE\njUvmD9eJpAtahhIz+5CkrhsOs3Z3fm+lFHzRAu5vU9ouYXPbcDB7NV30uHld\nfnBaoFvLR/QSXWJfzpJ1OJo46GNpBmAZ6YUBxsM00ZQRkSOqccB2iXeZzqle\nXD6vls/UPanj95NzeAXv8i2/EpFB6/jXMnL5j/FGTA4GT9xlVue1+R0qQkhs\nKpGeiYPti5StKCwHC7tzZCSXFjdlIixIBegiDoZi+nb5eAuzHUPtRSMsXsty\n2VK9Sv+KwmhWWvXCGiIhMPHzLSG609RoSNgYDr30VWeVVnOXoicW1g5A4Zs1\nsXt6PeQhXcoAsPGvA56saFw/B0Sb4AdKEmt0rrgCsP2cLnWypLPATuLYaBRL\n65O1vd9XYOmn51cz8BjN7CulX4IFGoYDqS38mdruqnOTCZgxwUC/A/1fhoX6\nFa590w+1waHvyMQVRotFEaiwjIKb5sGif4zGnDaBa3uhMIra2AH2YDD46A2T\nY31vO1+NSSJtGJDCfnXSeNxYpZPwFRVE5/q3oyUxWOm6kJox55vZDxaMaGlf\nzS+X8uo3s10E94+2qFUaspWTJg3gp3Na6696IV2JApNv2qobYaUqKWqpSSL3\n7Nao\r\n=gW9M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e69f154a1e1e88a636f8730e2d405282d77ab174","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022024212254","@chakra-ui/hooks":"0.0.0-pr-2022024212254","@chakra-ui/utils":"0.0.0-pr-2022024212254","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022024212254"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022024212254"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022024212254_1643059410293_0.09841380800665456","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202423375":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202202423375","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202202423375","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ccfaeba2ff6ca168f17dbee6c50706e38f33464b","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202202423375.tgz","fileCount":22,"integrity":"sha512-zI+mMBPRb6cGb/4ToMvofzPiWR4D8Z1DyojJlL4Nh5E/P62NO93LjyOBBqW7dwHzo49HoxWxcoZi4tUEMwZlBg==","signatures":[{"sig":"MEYCIQCzr57kDI5aQWj+AHQgAJ+kL5LI8EpwrowPZONa471YrgIhAOweCIP+JdEl5LlOOPHQ7lMBmJBI9nItSJRHAtgrL9wU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7zhCCRA9TVsSAnZWagAAKZ4QAKSSKXNA1E6p6zYjKDMz\nACoHNqAL30kkRCyUWVT5UyQRg+cC4KrMZPID9/zd6qrnsjbd1e9VRhOucPvV\nwIUHsH2uW7C5GAZAqMm9hjeAHg6in2nwh+Y/ovCKGlvSaezFVdVnUz5TtPQT\nk+I9XhfDsa/x3d/tGirFufYBzS5QG6surO3/UIKF1QlPFpWMeqKA4xMq/Wt/\n8OfptC5LN32iVwrqi7WQV6c8gkrPPBhymQ3iQK46zs9CrxsZWv6yEvE7FoZQ\naDlCi2li43DMyYdVTGBgcxtAgbyquIgid/B+JTomKVFVkLs2GTn6+mm3RYrQ\nY51wthgayGKVrkLHNI12WQ8Ir35dKB9YMuwzXU22uRBNZLoHomJPmvnKitEQ\naKO8lrcLbNmfnKCNqWoUXfBOYk303Ud40PBwjqh0oo4azCYcpwAf4EZ1YPxA\nNBouzaGNdInclvs4zXGLtZPivfi8Rt8ABq8X/kwEQkk7X76DqRWY64bId8Td\nbOBpHoLyWFrTeIMK1EUOtuwg6dGl66zk6l+MFvo39qF4avADCOPYsiQAxaiC\nR6OWhlFmPSN7hby5zk4G20LyE0fOGCNuhO7I9xtb8poPptcLKeKguxElWpUc\n14dWBsIZIOAVhSZXWPBFyZGFeNqFT6uChhZ9FsEUgaj4gNNYABh/fUeVlnZH\nSjfR\r\n=JRC4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"d3eead0763d58975f197b4c33b5c045f765973a3","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202423375","@chakra-ui/hooks":"0.0.0-pr-202202423375","@chakra-ui/utils":"0.0.0-pr-202202423375","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202423375"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202423375"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202202423375_1643067458410_0.8991801544901954","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022024234531":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022024234531","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022024234531","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b44640f77d77c4f32c09f05da269b80b28d9276b","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022024234531.tgz","fileCount":22,"integrity":"sha512-nizn5eQrfXMvd+EGSdKLip1C2CVeHNKddrdYgspIKTZK50iAbLvDcItVA7kWjDrgRhl6wd3u72iurY2eSv2FHQ==","signatures":[{"sig":"MEYCIQCPJ4trNYvu3/+WM3AGtPrkhe7tZeHmjVt5NA6Rtf1pfgIhAOSdnDcPVc0e+NbPc0TEw0j60fBfj9MtfnNQlt5rPqpf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7zo/CRA9TVsSAnZWagAA2jEP/22rK5o2Nn/5PVTrevUK\nhuL3Rmrp3M8n1dGOa9Sl2Id1gpcZp4gfAoCf6trdEzqwJZCdB0o3fNmlF5QA\n8d/oqmxzDZVtnC8FT31WqQwI3C/5IviwMM9fvfpZSeJjlsHhi62Jbnc4pL+B\n4ui5rDQhHkwxms3ZhqrVzW27d9gV7weDZqc021PnBbkV/GVW5AdOmQBE09gy\nJxSJ4RETaYvRmlBuNPXbIbxJCphTn++bG+qzyZNhJsAaeHPZ0Gl0GvM4LJos\nvgnC/SHd9fUMuBzo3Lma71mWgqjeuH6QkpXt80zbgUEILy2p4Gxn+blvRtp9\nIK4NWmH6ZX+USzFHizn9qOgyA7rETlVwBKEeA3ah4ZwAl1QQNS3zgLPgE7PW\nfcRz0rIhqm81zxsIZIg5e5sVMr1jITwR/jA0UIiE4CsbAwURS+A0amDrAPEP\nT8szVIneqbCpCsXjZDiSEGnbucsIjaHLzf+XxE9pDg40smax8CymRrAcuEkb\noKZ9Oh7XR/WzstlTlz/p5RuvzGkQqei2gJm2w2rqmN7kTAC1pF61qdWUqWMt\nRdYw5ZyC3st9hkSk6IIfrpBWrwQ+MYi/SbhPXahiVtB1PMsbblnZkjpgaXSZ\nf4l520xhn7ASOhCpLJ/M0JRVOS7IciP+sICY4pD47IepHFrbV+/DGo29Tlnq\nPrSi\r\n=YPd9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"4fe2787ec515af64d8a9642306de839fb4a3f973","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022024234531","@chakra-ui/hooks":"0.0.0-pr-2022024234531","@chakra-ui/utils":"0.0.0-pr-2022024234531","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022024234531"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022024234531"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022024234531_1643067967136_0.05046333736532671","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220258423":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20220258423","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20220258423","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9cac050f1d0743a71d93011b75d43b4afc3cdef9","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20220258423.tgz","fileCount":22,"integrity":"sha512-iiOQqq+g6QtX59wBwpRNn+m/2y6Xl+CVlaxVlApTqVRwQkQci4MhTChXsvyT9Z+Jp8F+Gmqxen6q5fO+jNmKlQ==","signatures":[{"sig":"MEUCICy1VuHFUo+pYQ6IZGI43TVzWj8Q9iJ+NLKCd2zNJkYAAiEA5678zr+SM9e0qfSN67mSZ1AwUcRo+WwIQWfd0ErVpf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77gBCRA9TVsSAnZWagAAKfsQAJiJsdDMj0EzsbeNJ6ay\nI7olpmd0r2cFqvC9yaD9cOUyMmQ5wRO0txWrZ7zOLc8LkcVFlsPE9AnVdGNQ\nu0XkyDvNaBhNWvGPIUK6o2QlBueSV2uqQNN6XTPfMvIaT9mPoMLf4PyDv7BC\nV+aciSb4EyRUIhxsB/afm3IcEFbL9HUbaMNR1nGt1I8CVwsCi0iQVp7auuFg\nyPztG1It6bA/1z5AnUJqy5SNzZKXDEvr8YCJFhzG2s8Ii6A89j6coRluPnPm\nuTGk41ynYuEVOma/a/GyE2AJcn2U7BOMz3371EPg3Ytv3eoZ6mb0mttvvfrW\ny/JS3Nd0YGXprXgg5X67WyKJcluna6Yh/tPTdKybKZykDMx3E+S93l+zXtm7\nKfFs3pJavfarFnwUyod0DA8clqle1pijudkRVGGhtH/RjmqRyCS0YvzTGnRK\nVxnQIlwVDOLYx+wTEVbTpb34/t8eqKeEMk3uGZJjMpEIzZRf5HQ1BbSv3Ifd\nKX5o8GorLOBHTZFVjzm3OB2jwjMZQuieFjFFCAgrlpo0r/i4ZTLlHhrFeqIY\n4plnP1tDAf6I9rbuwxjhkkTnhwwdwZ1n1htqyNEiYppEr4L56o285pqxGMkH\nj/+HR6rUrThX2OaB6Wxx1e53ScHGsaEYaRcsWOwDt2VUbOIWxuImd7w3MhXm\nJ39t\r\n=AX1Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"6e651353369eb28099e440b2c273921356ac3361","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220258423","@chakra-ui/hooks":"0.0.0-dev-20220258423","@chakra-ui/utils":"0.0.0-dev-20220258423","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220258423"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220258423"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20220258423_1643100161073_0.4641887519608576","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202584437":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202202584437","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202202584437","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b4a734426827dbff8a4c5d9c571b50964ed19f93","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202202584437.tgz","fileCount":22,"integrity":"sha512-u4ziJknnRAPjxIOGstOSDZCuMHQkDnZVEnUqdp8yZXViuKM5VGDVmC+55ZabYQm06o2vKh3iKHWz4v7fJpalgQ==","signatures":[{"sig":"MEYCIQCzX48qffrp6Z2PRXeVEtSDP0pMDpN5DrJ5Eojx4ReYVQIhAIC4kgitlAh3DgrzmsePlu2iWGaBY7B9YiBI35C9Skse","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77icCRA9TVsSAnZWagAAnNMP+wfU7Ir1Ryyv+aG3b3ml\n9DTpFc2V7uIbC4PkSVZN4jz/lSF5qBXsZslZ0wF76kVNEAHotO4GLZrn+TCA\nL8T4Q5u5CxqywF4WCuxsLTQiS10hyF2QvH9JHhhH5la/fs/gGj1imap77+fb\n0lBgn1LVa9gDLdR1lQaKLIieK8Ncv5r1GK42H18g/pG9lwGC2b4ndJzkKZk+\nRruKDttXmYr6bjtTVt9Or2SMnpnTknsm02WQSMNKqp5DoQoqMLCVqoNL8RGb\nka+8lKYMP6IJ699lAuVJv9Yjgmws4kE0bpm7h5LVTsvBxXg59A9XplMPbjKR\nOvoYkbSWcVYSTpRCRUg9r89JtCItImJud9D7Akm/8FKS/RrcFdFM1rliMUUP\ncPdKNEQBu/lGYuUoNBod8hO9bnmRThtxT4muowRstfoWwxCgiJ+DxIFTKV9/\nrdGec4BRo/WcamgTzdAFkRLPsy/FZsppXGzSOKwFa+Qa57DuJpyL6M+28jrZ\nEBlVBZQW+GtN+m5MJGoorXAegSt0LZ3DaQAZRhCqHdOORRS++ST5f57B/2NF\nG5d7ltmF5/WkkmJOiC5BXrsmNDKQkBJ5mDO1JHHAKuWV7fJxVdJou8dSk1pq\n6k+wAv4vbzJFs0PkYPcc3NgMoV0Zbx8T4hIf9p6C/6QOBP7xh5iWLSBWxdmp\nO60J\r\n=SLQH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"92fa404bf4bbb7127cfbdc749accb65409eb3bcf","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202584437","@chakra-ui/hooks":"0.0.0-pr-202202584437","@chakra-ui/utils":"0.0.0-pr-202202584437","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202584437"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202584437"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202202584437_1643100316240_0.7783226062170838","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220258462":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20220258462","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20220258462","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5a6cbf5dc7ed4617abf4d8883e9e0a13c789b141","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20220258462.tgz","fileCount":22,"integrity":"sha512-bEWVlVIIHDtmyMvr+w+h6ACfZc8eiN1E2GmgT6Khf1jxp9Uq+I6u61caLyL07nTHSy7JI3J52t1uI4l7j7zsJQ==","signatures":[{"sig":"MEUCIQDd+OufQzwOz+RcNZPSETgHQdbtoJm/Bi/JB1xsPjBq4wIgN+73FcMRZhNu/ByGGohndf5i507Xbplu/8R3fVZp3J0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77jrCRA9TVsSAnZWagAAc4EP/A4s1NRkSiwrEAlXrWQT\nuQO4870HwvPBGqMmFdbIS5m62tDo7kxSmIL188M3nBkRVVM3MwP7AZdb68Tj\nAOoUkBMQZV1d41oLoVvueAbgZA2Iv3/3T48F+WXM95Q47SPRoofpjK9+hGfN\n/Kk/uCUoxdQ+0gFcUhf6qX0Hpjm7HZMYj2OAnr6D6YwW45xwzYaPzyNP6RhI\n3+kxLOT4bGrjMC+e1eahubLr7QtL7n/hQ30q3kr32f+c3vJJOTqUh4IQpLNL\nEQD8yShV6bxaYgls2s87Fg1J437uJkkIJKVP89bkLOVc/wPUnVAdSt0sNth8\nc/r6p4kFY+Ht5nYoRZdLr6Q1UaO2LUj0bv2mb/EKjXvlp8J8uXUZbzc9qpAp\nWcSzPPWmI9wF/0MUQP7HrR2lpKbs3XiueBFuV3+mC6cNkXw3AOuXIwM6wMkR\nUAwXypIjLRuSdqCHWIwp8trzTW75VtneIFP8cN3iF4JYLm8M+3OqCIs/itSZ\nSpPL5bu4KfG53zxLTgj0dgLFuuYHTtgvsKIbYmvs3GpIUH5kiL/83Ft13LLY\n8xhStmESOCkoGPpS1TatPY9A6yp5p+s2y6bC/pHsJP4auV5Khoc3V+cjZSdv\nbCP4czd6xUes4A3sy3UK9e7rLJBk1QQd/4CmAHPrJ+Q+FaFolHJDP/U49neD\nr+GF\r\n=45z0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"7a780e413d76852ca5a956711f4f8470a7d8694d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220258462","@chakra-ui/hooks":"0.0.0-pr-20220258462","@chakra-ui/utils":"0.0.0-pr-20220258462","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220258462"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220258462"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20220258462_1643100395072_0.8475858045736553","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220258486":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20220258486","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20220258486","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6478b354c0e3f0be9162030ee81a7bfdbc0b708f","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20220258486.tgz","fileCount":22,"integrity":"sha512-rRCuuCvUwJxC7f51igFsZ6531s8lKXGQYAV5Ny/tjxZ5MiYx6+D6spmP90yx1QRiMTbIELOw7+UWyE8LTgWZfA==","signatures":[{"sig":"MEQCIBUg4Ar+Hgb1mTPhhilL5Q/1stJDK8MxJDOMGrJOLle4AiBTPmhZl/2BAN7cMHNm5Y0RPDNaJGBam/J/kuOg37rkkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77ltCRA9TVsSAnZWagAA5lwP/0navwQLpeMQvIQH4lD5\nAX2YzSwuyp2kvRR9xipGfQ01ge9JVfVNjJi4NsIXoO7Cx+l92qcfOFj47Vf/\nDHSu/lmEsQ0W9xXYLZBZfjcHTkbItPose7kj9fJYkemloMqOko92uLw+6aL7\naeFAsZ+fsUcEA8c3E996OLj0mLAdzf8D/JjpLx8ins+Zs6VJ9+Gf3Hzoo9zc\nOxgaLdGe5O9Cgq1fA9Ygjqjawsyqv4SptRb4YqcopU9CFPXWIMeEUH8wa4yK\np9zJi7vxLAS0atJPvygyOIVWWLIbjLisv+tq/r/RlDAsIpJtdcxlwsQtSlwn\nj/tbt0/A2RHNFKVG6O8cOV2zPlp3k5uUoxR6L1gLt7IluG3iJbAVZvGZeMyA\nrypMSQDXzOWj2sLZofzpEXoztVqql1+g2QrknBdnZFjKYl5tRENia1yQ9ZPY\nfr1lgMtcqmUX86uLSqGkVjgnm/QyhxuaqLVHlINQvi1GJ6kKOJflgMH2i9Bm\nrMuNwvAjoS+ql8or89RXvnTURTetu6oO6yUT4+MEtbOBG0ZNy/8lig7JQ6kA\nTWYCRNCZt5uO5Y98YL3HDPPaybAUmgJo2BBrMhxNIsqoxjnx8bC9gDlc48Jf\nZNKmNLVSuZks/UIfzgGMKn0b2pWuSTv+qKACkJAxadsrj/ayuC1PA29++fJC\n1Tso\r\n=hmu4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"7a780e413d76852ca5a956711f4f8470a7d8694d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220258486","@chakra-ui/hooks":"0.0.0-dev-20220258486","@chakra-ui/utils":"0.0.0-dev-20220258486","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220258486"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220258486"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20220258486_1643100525400_0.5899648749486361","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202585455":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202202585455","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202202585455","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"178eb5de20ee4c78b585ee2b86e6d18778633eae","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202202585455.tgz","fileCount":22,"integrity":"sha512-4pKMWmTy1nQ/OT7On293YuhdqT1XyLrHld5Ka7U+1pab0mfpuBowru6s9iN4nYUr/WbIT5GBGhynoD2xltRGpA==","signatures":[{"sig":"MEQCIBY5ZcfuUhw/Iy+TBAZ2gqREQM4+TvYIsyH8i9p+zlOzAiA2BrVP36tqszTNnuDK3Ci2qnIVCGw7bIi7s6KXYj9p6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77r+CRA9TVsSAnZWagAAq3gQAKEC6uKBncLe2oTqjgJ1\n5naDIL7Xbo/k8IlVudMXWv57Ft4ay9i04OV5iERze3ufxsKE0Vp8cg3cjmIB\nmNxK4BPZWvydUkQuMROwhTeKNfiudXNw65C5xrPWMfkvNc0aM7SkVA5+Nxf8\n/ICrE3QcEQ42+FE5zhXOmGCZP3u92dr1baxIHdPRQdRcT0FvRIwiAdeaIZkX\nqGv9I55wU2k89vu6x+C3c6jJH+ZhnpGAZKQzyjc4JDv5q9/PNGO7jtrjCaUz\nYAIwbKyeOPbJf9SZ0JbXce87Y1KVc43Q+EUlWOuJ4S6yb2uR/OrphsfnM5Wo\neodBZLpex+3hsD8fr4/yL5rY+0ash37pGKgJXmyjeOEq8mtoftfIYSyZedI/\ndW2QOsOWHFM3ppqN43xPJr5ROaWInfyKU9D/EKMLUN5vPo1wiSMrYjGgUovL\n0YnVCqdDfkb/XTEWA8upxPQIQ6kMtMwFPEyHo8awjBuqKoGiwZVXDsoBulzC\n0814iGFgYi/lzgm3WmTssh8n65CPFwptXKvJAP9PCbev8WKBw3nZ7cIcnSY9\ngyDxhmWeu/kQqDuIYur09tLfNkIy1o6XnYOEiXZyYZZWu5EYvE+EDtPcYIp4\nmhjamBhArGIZq33aezHCyrw7pNh4XFGIn+py9glz6uL9y/tzJdsOY1GoTu/x\noFBD\r\n=l4qt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"6d3b6d368771bbcc93006f4935fb54fbeba115fa","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202202585455","@chakra-ui/hooks":"0.0.0-dev-202202585455","@chakra-ui/utils":"0.0.0-dev-202202585455","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202202585455"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202202585455"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202202585455_1643100925947_0.5782644361521849","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220259146":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20220259146","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20220259146","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1c75871d345b5ed475153ade18f512e75da56405","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20220259146.tgz","fileCount":22,"integrity":"sha512-uLfcIGnn6J39xMEv5j+C0lehD/nPArMHZpA1OLGcRAZZti9K5HLMRNcVlLMsz93BlOHS1UKQrXf4WIhPFutz6A==","signatures":[{"sig":"MEUCIQC3rrUhmTPFP+xH5Tse0Vypjnnq+jFS/5XPetbcnFacJAIgCgiUKr09JYlZorL/yYD4QqSKLziw/GNu1eh1+tPHIs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh779+CRA9TVsSAnZWagAAT+wP/iSOAFpje798JcI8l6h+\njSXJG/cv54Y+efqRKRJyjolpYLP2CtgCeK1aXbIaP+3bbDq+Mji2hijal1mk\nL66udzFGwdq/6ALpVmBDTMFy//Vud7fM6Nq3v8w9xZE0Skq7jtJ+x6sEnYM4\nYQhCfC1pAL+FR6lC4ZrYcyd/sYx1iY5okyYQAVxnUYalzZiy9TnV4lr2Bbyn\na2F5XL4N9JCzvQXDq0fsnHFNN9qWtF+8MdBo+KjT2RidWL+CLT1Ma1z8ARnA\njeBStkeFWvftUjtcR3odXs9NW2g0oYxOVwZzWQ4GwAk6smFcbST17Jt3k1BQ\nv4Dm9YITs9s6SjqgFGVXKT9DGBhC+TKzZmF6TrBeoQde1+y22BA7JuChpuMk\neE2DhP4PyuE5dUdUtgfvppfwlEzKrvgRtnXA++owJH6NplnX4KNF5XT9jy7k\nV69ty6oZChvPH1INOK/bQG/q9P1LQ/58HLWOZIM/6zFxCfuDReKmBjpvQVJc\niUWe0VQlaV5cHgkikgl4q6nnHBX2nuMzy4Z4Ogw78q5ETqUvwYMqPdPq6p4i\nsdVkYo1IwcPjYxvmdRp8pwNNRF5XT+DsctsTrAGPF9tDwxXkfsS+o1kVk7uu\nY4tTdUQ69fIzzNfL0pCau6UGJO2CNDrarCFCHWEa2fxf7e1TOJMtbtGSKX4Z\nopZB\r\n=Pquf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"f4846a64804ce7a00f8c34cc8f7cff8d85d4861d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220259146","@chakra-ui/hooks":"0.0.0-pr-20220259146","@chakra-ui/utils":"0.0.0-pr-20220259146","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220259146"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220259146"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20220259146_1643102078124_0.9889456336041331","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202591453":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202202591453","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202202591453","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d3f9fecf39adceb4d660424731b422aeae3fb6fe","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202202591453.tgz","fileCount":22,"integrity":"sha512-dMzC5Yg9qKYpVFMXrqus5MPz9PY5gkQobYgHnPgXq0WcZEy906dYFpC3++CS9YpeD13T5Z1T7WdwwV+fnMA4Ig==","signatures":[{"sig":"MEUCIBJYC+wdo4FxTg5d71zgyZygXPrZxadAvp70yx8QYo3/AiEAuBbpg1ntOj736gGHxo8lfevKka/xILIZ7y8yZ32mhZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77+uCRA9TVsSAnZWagAAAHUQAKH0R0V3PHAvwWCLf3YV\nkJpWl3MQXVfVXepe+WRILEuPwwRh34JaGZ2IlNCapeze9qIdQhsdM4Lx32+u\nwHg8/RcHg77hTvCKRphIiUOiISngiqJrnRFw3eexCb5FZFYuct3CgyO/MnKz\neZf1aVacDzScRMyO5torYLh8WPMZ3n0spZZdw0t+PFZuvGqiG5RwoPkPFCED\nEQDhOnp7ovDPY0eB1CQmv4IdJeYjZHvt+6wSw+IOS8HCmZo665yZHEjANEBK\ncIlthSdAmKb3NLlv5n4r0fd1yZvNDaE2iEQh7AiJ4QgPV8tzv71rRQmC7dkN\n7bPcPWPgS6Am7Ddz+YLibdcysZjddws7n+pL4ZupOg2r0fxT0ZhYR7F3YMxY\nUswx30sT2yo92OsiyHMLjB4P0BcOQtePfpVIvF3TOzILUnOLn7/rKr9cQ7xD\ntqC7vXMz2l6WKufGaUHspBOl7o2I+O1fud83qrnxNLaDO74xn1rcuFNwx5t+\ng5LU724US+djpRk6YrWZDE7yXAoNEaoynuQkE0tq5AYulDsfXRUtS3OY1DU+\nH5tSOPTgfpLtRLsppI2rCaoPJrTLXBXyThoffb/yXUO7A28aerNvSNrmhoI4\ncf9BxpdDd6HcIE7NUZtSs/nywSNtSIv3RZt5mDTpcaJ1hWqs49ngro8ZGbI9\nspYt\r\n=Xy2a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"f4846a64804ce7a00f8c34cc8f7cff8d85d4861d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202202591453","@chakra-ui/hooks":"0.0.0-dev-202202591453","@chakra-ui/utils":"0.0.0-dev-202202591453","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202202591453"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202202591453"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202202591453_1643102126703_0.24815752511312028","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202591937":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202202591937","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202202591937","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fc4b4a9139f9b57c1fe726aa46c058edcac8d9d2","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202202591937.tgz","fileCount":22,"integrity":"sha512-/AxSqYVfbkikdCeRk9B02GuKvUUAB4DX0PNjU0bVAaRBXWn8VxmTTmoob8fHIYlklbPQVdtLduZO2xHEJYcwiA==","signatures":[{"sig":"MEUCIC+/3IJXAo+UBEMSRYLq0dgd5EV74T1YVxe/28casHK2AiEAkJhX8TiQU71jA8UnVZXuimn378PnILp/O9F4IOnpXrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh78DMCRA9TVsSAnZWagAAfnMP/jRCl7p7yBFOX4bApyto\nk6S45aJ/c7awxG9lQCegmHcc0Aa6HgLm1SHCKOLSrmGGmmFxJyTa9T6Dt44L\nErErtq+WmyEgSo2LhnU3Yo870hPoRZuUY/Bx+zWbyTSzmFdYr5a7XpbXWRRK\nNY+KHTFKaVnXsfp0nxGfu2e9E+3fqUzM3azwRlRiMgjWBoJOWbJDTgVoq6x6\nkCNTwOpmlgfpRpGjqK7Ahlb5X8hx2FaO0/3nNtiQF1G2aW85cKO6I7MBy4BX\nQ+iOTwJ7OGlG3cDxT/i2fIfNprfBp1fSaHH2DL3OwQUq1IEuGh/ByCWOLfhF\n3YIzXmGcMeG8vIeD9HDjTX3vURBF+2LZQ3ElxZfIxSi6mlsspCoCIxzpXVRm\nKd71AcFFmj2mQHsrQDZnnfy9JnwCRrkV9IcmONU/osRTSzLjeA6/ABSyGB4o\nNK9jZrCxYlkGXNxCH6hoggFDuwWYZQBABMyZbssxOAXOQCHh0s13kvAAHrJW\n/fZiseg5n/8FA1KdczEiB1vjcTeUAmAH+E53n7QWuiiAAKUyM/6hNX2P7il3\nm4QKdrWQrNIRV9LJZXPIc9ObJ/MlcgHuOKV+ldO3TO5U08I82im7FHfVA0sX\n09kETdG6H/pyszu4/f36CxPYN3V3aFhIXWTCDKs4Va7yGBKovMuRRi5L+Rkx\n0Bs5\r\n=6R3e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"39c7b1664ad18aec22c2e0bf5e92ee32a199bac3","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202202591937","@chakra-ui/hooks":"0.0.0-dev-202202591937","@chakra-ui/utils":"0.0.0-dev-202202591937","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202202591937"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202202591937"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202202591937_1643102412135_0.1779191597959653","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202592640":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202202592640","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202202592640","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"82b90328667d9f3a1f26611e8f00b39087640860","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202202592640.tgz","fileCount":22,"integrity":"sha512-PIG0pDPbXqQU/Qwcobdcu2NVht0wMMKQEAawsYeq+A7VXgbnRr/e+ZJ72HI+O6ZpdacYgKwiMiDOy+eMmIwiwQ==","signatures":[{"sig":"MEUCIQD35aGH4IPZjAwaRyILYyCDMmAg/3ieLjFG6ES3XYOJpgIgJz5Uz5v9h8SfKOgjnnXY61GMKs9CdcAjYdHgwVWnxjA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh78J6CRA9TVsSAnZWagAAZiwP/0XRhf14ExcJRFtwwsV4\nlX5qzxVNaOlqcisLyHFB6OKP1puYQ19qSG22deG6fHTdLkkIuwzmLMSDS5GA\nREmlOF7f09KuerY3cWamcM6OJ3yN4+Wmh1LfTkJffYY0r2FbkTonBB89ECqO\nAo5JynIOV4hIg1y5QCr0rd7QJT7dmY4oQSN0jhISrQ3dCMmBwvClOMhQpsHn\nO9wpI/pgEp7RXSOuM26pp+35Wu+kIhU7sy1hfqiIx+fRwyDa9BUfM2j578Cs\njUpXHJ1pGqFpezf3d29Oqv9FFGH2Mi82bmYsbDI1vMxsMylRMubApp8L/52C\n7RZPrtaccQgpXi5KP1YkZfC4gMtGOKoXig9Fbk9ZwNqtwfDlEwJQYETqXAWx\n36EhjBaSSzNLjaZfqyybEE22Ypw9uoSsDyVaeaUioD+8mePI10YJjYaGVYcr\nHkzs1JhB7X7Z0NroVMr3aAOBNqMoPTiIVPG+hynJobtXDOeJU3cXVTqg3olg\nmvXk09JpveWEY1OKVst98gKlUsQsJF/dmEOWGLIO43JyVkU7aTSvdMwB1Qe4\nLKgbgT0h/BhaMl1rUXR+NAyxzTB9j7GBnKSp4oZJ83qvdHRlKAYAFCp5yow/\njpJv//YsbNrVgJhCDoTR29ZWiT5ORQCT3hMb8mX8EY/7q5ATJIOHiLdrtOCC\nav3q\r\n=FKqI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"1b31b374cbf413a551b8bd288da69e35c6bb8379","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202202592640","@chakra-ui/hooks":"0.0.0-dev-202202592640","@chakra-ui/utils":"0.0.0-dev-202202592640","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202202592640"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202202592640"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202202592640_1643102842655_0.3862845121036649","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220251866":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20220251866","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20220251866","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a1af82ae13790b84616767e67087bf71c9e5d0ec","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20220251866.tgz","fileCount":22,"integrity":"sha512-BZEdPbcdo2zWKMTe4FkVlPL2PPE2Kj7iVal0Mrz07iMV98M8JTQXfFhme7XW3jyn7Tq2RZG/+YIgaW6UvKTMyw==","signatures":[{"sig":"MEQCICf0DWr/zPklHw1RFg2l27tA9+rMBIedQ4/UOJGx6/soAiASDL40OL6kLpORKo+9ftY5vfRxxeevCNg3pKb+c3oLBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8DwtCRA9TVsSAnZWagAAmFkP/jXVg4fCnA2XAZuK91qO\nmB3a0RIhD04hbgisqjhxsnv1ovkwogCbf2+5sYM/F+o8Hf4fuOmzxenxkl8F\nezaTUb7ttcpgwZgMZlofjVEZteH+3r/LcaLmkmugNR3U6NkZLtgnsJF+wpQS\nlTUV5eAvvNMEkiGlDS5w4VpFKfhvw5fDoRRD541gT3Esxg76ME3Tff8U5HPU\npJGVLJ9zqplKSs3OgXHDh4NyJ4iVRNFUGJ7oqdPE+6Mb+d2+NZzyEDcmpDp2\nYyQ6ryIvWcAanitqoj/tapF/vXkFg5KHZTn5mJRkXm0MWauyp8KI6QaSrZlV\nURUKKWTXtQK/41MLYIivTeE3eQd4Zp3aev6VOAAWJmU69T4H2/yhJwvgtxb6\n21j4r3MM2paPv98GR0SGo+grXlML4zSq+uIWo8nLWuQ5o/IXkr5ovJdiWXc2\nnOeN0F6nMtijKuwWq9GLvYhDtI2bBxgfb3KunxQYg+RREXFbxhO/8NUmQ92o\nQgYX12v/di7UvvI4IZEgON0YwZAzs5k2z2W53HXhDslGSmE8cSNK9pY2S3M9\nVSSdYKiU2y/6KDs4D1lmi06LpwhH0o5Em6dHfaoKhKZh7CiKxVfvhKCsCu8g\n/Z0XWSxJat95HqqgVexbv7WuF4sMRENQhoPpgn1JZpIjo9IAUEfuaDwO9YMr\nVXkO\r\n=1KXg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"1d6266a4b69086a2bdd69b3a110678c16bda4c4c","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220251866","@chakra-ui/hooks":"0.0.0-pr-20220251866","@chakra-ui/utils":"0.0.0-pr-20220251866","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220251866"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220251866"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20220251866_1643133997794_0.4517744500191261","host":"s3://npm-registry-packages"}},"1.5.4":{"name":"@chakra-ui/form-control","version":"1.5.4","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.5.4","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"792ee08ba68107f678a1174fed6b3c39b5e81938","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.4.tgz","fileCount":22,"integrity":"sha512-l5PytJx4om1ocSNiwjwS1FKonyyvk/RPycgg6cK7s8ckmlOVvYxT1E0sV9nHQa9vmLlLDWrYKh9iBPfXXHg76Q==","signatures":[{"sig":"MEUCIFupPLzkDrs+QVXlNgeYSe9EK7WbeJOLO5veVQgMjncYAiEAoayAOMWl6525ib9/b1EVR06zMyBIrbw2m4P+vI5zNtQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8DxWCRA9TVsSAnZWagAA2IkP/36rDayGtyjSNEBaIBOS\nKnWV91VgcojzvXuTrXF6qyO7IdkqoWz6w/BB9S0M85Pk7IMHXwTw4OrWBKhx\ncJgPraU5E8jxHIUYzr/bZls0E7imJ1t+mvI7for9pv+902I30EWCagpSVpjZ\nkS3T70rVcp7F2H3U8UTg/Bwjmg4G82wJIm7xSSNkru5Ti2b8KYlT++wrhlxU\nqqWiUpJ5Cg5JQ/0/BUQ/uiEFmXYMp77Uc6x35O/EWRf1uwTgXMP5hof1a7TF\ncWhglabYrIonK7gQ+ZsGXy9DNi91PyIFboQgzJ4aTFoRoEF7+rs5RNTLiEN+\nD4f7DmeGvV9IahxQPbC/HbBUBHpYIf+mZy4wx1hEMRefvKQXb0VrLgFQbZG8\nvTw32iMtKir9+BWReEWDJ2iYqePvK7A+Uz/jcAOGXMaiO+CvVBwYak154Aty\nzrfRTvH4MpxQS2RqusS8R9abnkuKiqWzNFRiRSvfqAR03I/00eZ/RiqoVlUx\nJcrWdI4YkRP8xZpwbNbcRtE81irH0UxbaPggPqQFUeYNbwzxIwGi91amRus2\nSQLmwYciA6B7RNgYM9vyy1ittOq8Wh8C9tXliu6Mxcc0vucGTGxx4oUAIzBP\n/R570vmcnzXS6/QinrQ6jhoPc5XtBm4Azcq1fGE/OVVqhfBDI+YLPbamTOGo\n48Hn\r\n=MJaR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b8508b0f3f99e0ef04333812938efad93da02dd7","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"2.0.1","@chakra-ui/hooks":"1.8.0","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.5.4_1643134038275_0.03139928961948768","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022026181758":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022026181758","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022026181758","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ce0a13616b4809972954833fbc933c9837af333a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022026181758.tgz","fileCount":22,"integrity":"sha512-KRsTq8/W/OwnVaEEh8ZlPMpY0APXbdmBgATvQAjd8lC2oPp5noRSB3FX5JkeeFJotcovKY12oyCaGTV8IqrXuw==","signatures":[{"sig":"MEYCIQCC5541SXbS6yLgQdMARMBWNg0u9MUCzX3apdOHLEb2lwIhAM1ccFv0VJDHaRCKRaFn6zDxxlziOn89ATM4oj02FjSL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8ZB4CRA9TVsSAnZWagAAtg8P/jbM8LimPri8r93f+y6p\nUVWP8Q09GBD8MqGDhiq4q6HRghR3HC4Rn8w6cUGGmPwRWAfIacbsd2gj68dw\nWPp6GP1PhoF3gk2rDdVv8+St/k+vD/K7UfhVzVemzx96zdTzkg69OBj+Xis7\nX0YY62wPJARRDAimp7wNY1u1g9c7jJnd5TvU/QzTzQsJRYYV1BXE7J43mvby\n4Op/pEfOGfgOKY+A0voWpSjF9RRQ9g8GohfSoS3FLyRRmz4nLpEzl2Hf6bCi\nEgbA3S579oi8FJiCXGLJtwc5Zz8vpSp2TgF1XNiQafUsOtOvm8W3q2Zof3ej\n6eDPazIx737r9aHaXsQrpBJfBApbiTaiyFgd1C3sIxpQRXEjZPhlz2Zr5Qlx\nop2w1UAMdSy9TUx8ZqsvV/SUP2qmCo4YPfN4NtBXXZik7z2kfmEYcwZpgj3N\nNdyY7Bdya9teQ/bxBPWFpBQAsg0hR7k1mc51qKIw5zzyOVIyiYFVJ5veox2/\nfur+Mwx1GM2HLFKS1ycjzYdRHUb7CV4tgzw698X8Ba3J/jM9VtVm/AE0RRQs\nSxJRpeB46NYt+QwsvxEeBcl+/34Ghs7STEOmPCDaYCY7qbve+QodvHW2gk2h\nLPmCjdbkQ/6eKbI9x8TuYpmnzejn3ALRqfAj7g15dQRW7IvvNXdmrfYd6nji\nLJye\r\n=MaGE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b2ca7dcfda51c801870c864e98dc23b2cc90da78","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022026181758","@chakra-ui/hooks":"1.8.0","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022026181758"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022026181758"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022026181758_1643221112003_0.9532342184974201","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022026182926":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022026182926","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022026182926","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"19295cf45b1546cdd0d578d2d0ed6a8585a74503","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022026182926.tgz","fileCount":22,"integrity":"sha512-pMQlrenfnY6VWDMthlkDVdQzvm8kIaNkbaOSCjIsr34/o/VEG9z+Gmq02moMmm+92R8ZCGV/H5aGIQ8UPC64Kw==","signatures":[{"sig":"MEQCIHCw7Cpwm4/cgPEDKyQQk4TRuK3jU2TRIbQMS7e7OIbAAiBxLtm7MiQ590xFE9WRSDTAzHYSoWU8ey+XSRaU7z3Mdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8ZMdCRA9TVsSAnZWagAAgBkQAJVb5olEHrkFO1eTBBUr\nAV3WkeckEnzkID7tRPVsiLB/IL58FESS7GngDC1UG27xx7pH2JISijSnrRlr\n1anxC9iG41+uus4MrtsT2jm+GlDig8o050DEe6izP4hFfIAST+3BCx+vo0nV\nFXEXfK0f/i6wOC78MefRRBXFNIkT7BpJcdQRSBniHZoY3OmXTS+EnHhNyTOI\nUSqMeRYGKw/GvQyyWQ4YdNq66dGGlapegrgL6gxuN/t1XlXnVVjFYhulRCg7\nZaRaJr5EXVKKjm36pVxAJ6+TlBU8QPI4z8V8w9qCBFLKvHL6EAYBxxX3ZK70\nXOr0FrXGiogVTqjJXGcHsLoV7hrzqVjAGvRdxtaKXXeW785w8aFxC8G0WZdu\nlo+TXxLtfogMly/8PUFzCbta1G7+Em+eVeYeVyiPXkkHJwPlaUwUY6sd8bCu\nVVhoJWaY+JxKBZ0ydmvqK4NMtjSqfL21+9Ib2OQ0vWJkediIYu7Sm/KPt5qs\nXSbrgny07KSM3NbLXs0KO7rgHPlZjqMf9eTxZFW3ndpE5PkxlXdQD1ptGw1n\nCDyrFhFYamROV9ouBeCU53n4jHRezPH56rvCzhyXhJBxjrAM5e2sganfxWQB\nF9GyhPltJ8lNWmADIV1pgZfqynu2k4QlXnX+ixvilki27SG6tbyhp+sK3YkY\nij89\r\n=meoH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"1bd1f2ffef44d810a099b001be98e3bfa229ddad","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022026182926","@chakra-ui/hooks":"1.8.0","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022026182926"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022026182926"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022026182926_1643221788863_0.7162699620597206","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022026182947":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022026182947","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022026182947","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d70a735015ad2437ba9b27b7b180246b068f73b3","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022026182947.tgz","fileCount":22,"integrity":"sha512-B9XDkXLkg8pmuSHdRDIUGLBejk0eURVpUYxaYcGK6JE6VEBjnWotFatqEFVxWAndBGWSKKFL6uyiIRdYEJQZIg==","signatures":[{"sig":"MEQCIGxHeiBwXT+PytVrOz6ObVzqpU9moJUUY4pSPoVPanPsAiBjkgqBVl4vmaDbnGpX3ZW3VswJEwlXZvX4f91ZLsG7KQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8ZM3CRA9TVsSAnZWagAAOPwQAJd5etnbHcQcwhEOiR8I\nen/kq0om7VkccoLYqEo0CnrZBKxOI32tzg44Mtj32R/T2QgDapWHPEWCtYwT\nGgCtWqrs30NzMlInSofzxAU+wJqiUH3gOxJGarm8KKyRnDQAGS+DvIIS4Ad0\nGPvTwldWS2zw573Gq8FjgNvZ2B/Lc6g5OXwYR6MzqKJkgKpa+7uS4eNwYWg8\n1dHiMV0PVP1l7kNOkxfV9u3RrvLbpNWNGNDT+/4T6P69baZiYRv8M7py/Xni\njhbpVTGLwpxF0YKHPdo4+YtG7rG4rp2zfShd9gcAd9xhpOZDe18sEhqzzmnc\n9s5gRreBWJlxmpukxjG5wFTTdN3we9J9ryVweWvCDQl41ScVzckZ9ovzvPe4\n57liMbYs/pBvPl/X2vGlEMAM5Pllze0AtYuHheY7uITgVZ3WXy+LI2wdlEA5\ncHs/MsL8mzi87lJ1nLrHhaouu2v12hBnB0IbT449ZcFyPKHS6GLne6Q6kag9\n/Nozv/YLdwQXPH5pWAhq0YyHgREz71HbKDs2UkMQsQ8g73/RWawKxIkS3pDs\nxv5V2//KrEFslCHOHZZWKbAT7D0uQLtIeVwBFBgqYuX9YfpOBM4wngBeEkAY\np5gcdGPba3q0Oqo86H1SEmO3aUWQR8GEDb85YlwAfd9QCbYFjQ6XBv75vyvB\np2Vb\r\n=mAHJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"1bd1f2ffef44d810a099b001be98e3bfa229ddad","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022026182947","@chakra-ui/hooks":"1.8.0","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022026182947"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022026182947"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022026182947_1643221815115_0.3724196160049913","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202618407":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202202618407","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202202618407","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e8f97c639d87dec5efae850e9b43d9450cc482a6","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202202618407.tgz","fileCount":22,"integrity":"sha512-coK22V7G4VuSG518v+GH/Xwi1lZQ/5UXH4a0MUmFC2gSjwXsObtOElP5e9sA78MSs0qkORLFKWG4GIXG3Hc4IA==","signatures":[{"sig":"MEQCIH6Bw3FZfRKMOOWKYwm7KO8+5v3AGrpndmzf4VU3wMOCAiAjGcR4x+j3AvJpuQ+MUrUmp9LCvyzr96zhZlJzL9EIrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8ZWeCRA9TVsSAnZWagAADDcQAJRTF2S2FnUOKexqNTG/\nzRw4jyA/pSDSfzD2T95qEIiS2f1V8PM9/DBkVQ3glOpiuZecfB896Ewj7mjZ\n33Qx5rfNRnTfWHWicoxKoAhiT0vEdmqAr+VLsDuiS35ab1hiZ6H22TKQynqI\n8XV889xoB8ItGEoas3SuPs2ZlC2MEIJEeh28nZTo6vmgahwePtHK7pnUOEAF\nLUrv7Tn6tSF2ZxB8yOKVgPuc1JpxQ8JPZZSYBUeV4/R7wQPhrIysWLadydJm\nKNp7fp9QX5SMSzjNiH+ek/XXV+u+bhtN7hb27im2DwskVtqBsE+UhrsE2WtD\nRjUWyOk4/eICsfWZiBtyhs0J+IVOc0BMhhsvHbPFsbW+Gpyxst68bqZMH2+e\nyJw9JlU5rj8cxNVtkfYATprPosYSJH7PjAwQ9UGIKRlkM5/Co5IJ7SegLxZb\nY9p12Vrcc6plc7Ns5RyxzPGHlXTxWdAKCZLkdGtu2fr8HYc9gNza5uTCnNWM\noahovNUlUl0JbnuTeqKi1YwZG17ETlud3VgtzpM2HuxZnFbFVuIkfBw63tTT\nlRxm7B2rl3w8FfXLVxFIsi95/BovrlLFJODWsMANMoKBIeodxKAqPYiKenpo\nBzrK4gLbi5tcAA5vG61nBZt+hUxejM47IvaBzFQLaXJnCcddtXn1zFUFx1/g\nFh5p\r\n=437a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"14239a2e6eff4ea17b2eca405f52fb26f02c48b0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202618407","@chakra-ui/hooks":"1.8.0","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202618407"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202618407"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202202618407_1643222430546_0.8412210637449467","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220300344":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20220300344","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20220300344","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f793579748d64277eb51ba450374a544c3e55c84","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20220300344.tgz","fileCount":22,"integrity":"sha512-4G3YtNDvkvZM36+bOtZK1p3SlcwlKJGM2b1d49ljH63Gb4wOBSV8FaWRyCG71mG/o2v3pbg/D1byZaZbtXiI1w==","signatures":[{"sig":"MEYCIQDZjSNA+8bqZHxece9RaQn+DNNn1xtY+JYmq0/DG7dv8AIhANiTE66iuuk1Di4DNr4MRXwNVDgyt75lc7KnPRrt1KLX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9dX4CRA9TVsSAnZWagAA+QoP/0kN+oOG1e6m6A/NoBNm\nMO4wBGeJMoMahABU5i26Up7V0XWR3RsbqyOXbUttr6m2/0Fs0RNAUlnOOefT\n2kpukepD0VvPGo27/ZUUd8W/GwPjTB3NNj5KuK1t4GHIJziPb8BBorqq2gbY\ncDYZhhE1jhKofiWQU+/iLWw1X/Lsi49N0d71qBMzIlpjRG/GNbaAn7UuHyJM\nTD3LmlGU/V7VzPmkE8fHkaxC5PV030D9dw2oMtG0Hj3Q4SYfKaFQFK4r7o69\nL7QWPmYqeHoAu/GFdQN0lT1dxJHsj+vL194nY39JnXTDRJcsY5+b/dNg8jPT\npTpquurgZTtBUajUNF4w5JIR1gjVwQPdKgXyk2IXmqcQAqF2dL8T3A7OJwAW\n5m8sC4MIO4NFI1vj5Td1s4ifTR1vcDgcXB9JJJc5Hdz1Q+aFIQb8cRpf626I\nugvEm4dR7vvqFF/OPuBOpCWwPzh2evKgjiWoqMAy7Cn76zEhhVbJOwXhdrcH\nSdvwjxXKmD8sZSpeynDPtJ5Cws8Lq5KQIwWGD0q9kRYmuN31gRxpAlp+3bwp\nTO18QJaucMvZV9Hj32U6ks5KAIH/KsO+lp+xPc37/cpgjvA2H5ha151dhOGn\n88BEIdoC5fRP/ao7aQLDVk4P6JdXx9P/UNCbW7nB23hgt2Eez1BzRUXJdueO\nLIsD\r\n=aPOt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"a62b5ddfadc06b2af6d674a48e42d17aac9f93b1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220300344","@chakra-ui/hooks":"1.8.0","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220300344"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220300344"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20220300344_1643501048092_0.8130663941997607","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221152957":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20221152957","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20221152957","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bcea04308a86a6c5f5d6a63701e232f36aa734a5","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20221152957.tgz","fileCount":22,"integrity":"sha512-MNj4v43VDZlWMP6H1fUaOyNhdhmhKSIYgFaC0hyUOjkygM2bfVcIrzd0SisSOr4DID/+q+LQRMaC528yz3tkFg==","signatures":[{"sig":"MEYCIQD8sb0zZGhhHpBW1ZB3Ed4kzFjiRUTiOx8StF0X+9xdOAIhAPF2pzRyOx7jnO/20MxqgetFL9o35wkt18ag8lR71mld","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+MVzCRA9TVsSAnZWagAA1UsP+gN0lZgKtZH2tFzgs2BM\nzoC04ZGy1/7DGxnIb/NTZahr5kXdDUwJ8xm/frsKif0JvZW9qBA483gI71OY\naJVA3dGb9t44sB+IvviItjhFDlvF0i0Zy4Qh7orKI38+nkqP/DFTIJ5CkDqb\nPdcgjRvSawGSR0yZ8uRSRHpj+VU4FI+JBZ+WdHWO3EDBt3aIeTDo7t0nPg80\n5mlSrVw5cC/vSj31s8OjAiEt5EDd5xDjRQXi0zkX+K+9HLBkj3Pse0nGgtAE\nxJw0N8+ys1O2+jwQt5WwvQUQ9Rbq5H0A3rB7x96ZOYVmXsJ18iUVcGP0Baex\ni5LG0qDhfzvgCJvJqU8uj3pxrhqKJq03yaOywK8laY2d7BzN275i41mKRlPo\nCTOqL9MKAkpNnFOAn8LSWHElWrLtEq1tOt89mOfdv4PnPibIHi1jeS3G7AyT\nb/xIly32cXIasz8WDVe14RNR7nIJEqMYBNnew9N9dhLnNsajPWfTPBw81yjy\ndELdicA1/SH0v2titMTiM0AvwqsaVSv94bvuufKyVrUrj44bErCob7DlthmG\nQP0rUse2SLmpf7LjTjpkLYXXwWS16zUrA2I26if2jMEaw19yZ+T45ERyXo0o\n1dTwv8LMyCCVSoyMEI2aViGHQAtMHGjBb86t4nJW0K4xNLyPRhkXdcZJ5yq1\nIN0Z\r\n=57ek\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e1057b085f47916fb148561e40fe0b4afbdd633f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221152957","@chakra-ui/hooks":"1.8.0","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20221152957"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20221152957"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20221152957_1643693426959_0.3045778445544103","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221153122":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20221153122","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20221153122","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6e787d8f5c82b7bca2c8a438e70dbe58af29d2de","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20221153122.tgz","fileCount":22,"integrity":"sha512-Gok85lLEwqWzZloLolGKxdkQzo/R9NzH1RYfBuJeyWn4+gefKYXdif1x6b9b1/JMPGggPi/0j5+Y0v8KY0fydw==","signatures":[{"sig":"MEUCID9zAxVMZ2bU7nwwt18rqIzZuUS48REN1dFJZREg4wfLAiEAyt+kQuuL/8bJpZjgc/FRF29FIx0woekzLxk0LuOqddY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+MXICRA9TVsSAnZWagAAmE8QAJdgyugcrgAYIf19SdBJ\np1LI+6dQoQCATq3JY8eKvJtig+lj2Rzqrj58YgyoYKuW3W/aNHTd9uPeCzg0\n/UqGHvFR8t80DBZRuN2k5lcL0iNmjboexgQqMenF2bLo/W7UzWhcn1rGa5Gh\nht7ziy6D7wssrJJpWmWMilqfwsLpHywX1LiobEnkjKJDCNSF0lbC0Mcbs5IH\nyv4egSOsXF5Cf/1yQH+5XqJtZvG1vGE4wGTi6elSJcVINirDnzkHhWzmwVT2\nR8Lo2mUAGHPrnDaqx607KKUCNiQ9S9bWeUsppTZ549NiwYsEP31fmOfiPz30\n2ZQ9moyZiL1IB8pdHZizW6qIS3p88MdnP/c1IrhLiB8YlJ+6B8HRwXcA0+Ox\nTloXol1LnGydDEF7wLcSsGbYHUbGdV09sIp460ewyy0uIGOynkV0BKKxSr15\nWUaqcrY1je/Y9NdSgHXU14thzgF4rbz4b8z07m06A8TzucOwjg1gX+TNQEBC\nSdTMnhWqyK2g396iQEh2xAUK46wHci/WhNaoRpjYDz+GRsIZv4AWvZvHVpeW\n2S4h8A0PuAjB5wRs/vGS4Eot1n5KSlzhmsHs7DklOo0V3xf7N3w2p4thf5W1\nWurwCwv1p5B+3Wkfjze7PqX8LrmxY8pJgLj9hgiNSUSCnAs9yzvE/JrpoyOt\n11JC\r\n=RsLg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b2ce85e29e16138bf67268fa4f2ef56de33c60f0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221153122","@chakra-ui/hooks":"1.8.0","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221153122"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221153122"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20221153122_1643693512298_0.4966881496642741","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221173228":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20221173228","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20221173228","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f8a9d180dbc7ea478d4a0298f33cb5b84a14f6d4","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20221173228.tgz","fileCount":22,"integrity":"sha512-Tii/LNlcAZ4O8uwi2UQjOnFBUPNnrQjtB8znv5072G4ScRh563xlW7oTriP8mnn3zECefcJVTHPcM9AWrFbKcw==","signatures":[{"sig":"MEYCIQDAXVFyjEbixQo1vmvpQ+Y/Poo0urYBhECh5s1tWC5tiQIhAOfDKk37/d7L4lnu8JV6IkeG8cfgqnFozNYvx7bIP6gS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+OInCRA9TVsSAnZWagAABCUP/0zvFQJqins2s0l3wdXK\n1prxAOlqKnlJH/iX01yySj40WszyX0urlvMJGnxIh9VWuAV5udvqspoMpdfH\nkZ4Ly4x6mpsYpI1n2ro8N8jTm1nko1mZtbzQaMkLSs0pcoE9DXfVOP2OU1Mj\nCdJDse1kV5AcgQYolT/UjxNjyKlmKRHpHzQVorwafpuQ5Hc0zhqPUmMX4Y8O\nS7VXhJFQfDViXLl5P+5ERUJU+LQRbR6eSOWWwVe/aB+R2RRXrS5IZgTMLh61\nxTlVd2t2xvu/KLQTVm89Qt4VAqvCk7JE6WpMXx4q3VyAjsDwZGoIKNpiKv9+\nk/WOX+fd+NMMehU56jTOCGPHG/pr0ofoe3uV8U7LBqcU6JZpMiHXNDcoRB1w\nWGcEumxkQ53pSUB7JEbckK6T+dp2vUrd2DzdOu+AYaewucFjUeVuC8eViQjS\n8YD69RqEjJAMx/6SzRZ97W5v0V/T4jmu+E1QeOcoAlgwbc4pEBSls4LA0gbK\niSe7yOY8nLMcb534yqSYx2MVDMhUonXcfrFx80LFckYWb3s14XsvTif116bU\naiEz1fEhLXMgCHvIvep8hdP/HX66mAbm9Se+YWccBKRVWRCidKBB95yj1zKa\nBsRuy10pDzvPbF5Vxq+8hfIjZpTp8svW8qZkhRxriAnP0lKHabTPfksVOKN5\nCu89\r\n=ONzn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"f730ffe104bc5f34dc08a7546c51feae821932a2","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221173228","@chakra-ui/hooks":"1.8.0","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221173228"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221173228"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20221173228_1643700775621_0.14131168425991558","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221173648":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20221173648","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20221173648","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cd41573897bf8da68997863190b03e15c73229e0","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20221173648.tgz","fileCount":22,"integrity":"sha512-xW7jxkvE5TOodnbWKGc06NUbYtE/uTzWo5JtQY4n1Pl9jxP+aTdsYND7LZx4wSt5Cpmo3rOYBljAddt9pgP13w==","signatures":[{"sig":"MEUCIDvfCriJZeayw/42nltFM7KAtsJDm8h32EF3uZw9AOVYAiEA16fKvLsirdTi8L9HVF1q+2pEZFKdk3jCnJfavq8t+/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+OMxCRA9TVsSAnZWagAA65IP/2TLt8Xcj66isK08aLR1\nJlAjye+fPYk9ctl4iuWzFIIf35drB5iBjb1KKDJ2WoSSEsiLl0E7incJkky+\nqDeVwGtX952c5csk7zrw0KqXD+w49qihHazoG+u9cTcye33TXaIfFVNxUhGy\nk3nS7bUmafc95WUQ/4zxROc0II3D32sWQMFl4qUDP5nVFlmy+sxMqrY2cKP7\nYMtZ1NZUusGfTCz0wjkEDG+BYC1NcVs++1zXZMdJqd+NVVZp9A06rvYU1Keo\n1L/XblDC6m4iGag9VZycN3dvcfF6mdedM5ZhHwpcsCsR4tfBa9o5r5WUDhm/\nGR8kwqioYqwEHdMlzeuOK2QLp0z6txQaHhkawglxu3l3Fvn574J2lnrX4hCe\niEC47fg4n4LUetNi/8p/2DOWE4FHxINkY38ddFx0g9WeWlM0V+WIXtkHRiDA\nw933XTAPUYvake1kNH0DaeXiE6fZxzyE2I2WgrpDVlaPsj2f8FWEnDg5/xJq\nKORo33qX2sHGIZma/DLHSDMYFVn9ufm4hieUT7sxaGXC9grEA3bUJqn0DeMY\nEfVPMaZIz4uI5y0lUiwkm1LEt1ndx0/0O1AdHwtsLiJEWQWMv5CtU4hsDDRs\nCvD02Jamq1XQWRYtIOekmT9ecO/jDZcMi9lX2vF5koFPE/8qvfwpg/xB/rZo\naE3/\r\n=PEGx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"f775c980f4d1e8a692bc45cb642eea796d4025a4","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221173648","@chakra-ui/hooks":"0.0.0-pr-20221173648","@chakra-ui/utils":"0.0.0-pr-20221173648","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221173648"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221173648"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20221173648_1643701040891_0.2362369932248385","host":"s3://npm-registry-packages"}},"0.0.0-pr-202211224055":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202211224055","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202211224055","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"49b48884de05095ef904e4bf7d1dd01873e332a3","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202211224055.tgz","fileCount":22,"integrity":"sha512-eYYCnkJB9/vwBUC+LY/SQjJ/usba4iCqHMdk/92otbXi2WdZbWGx1N/x+5FXJMtrEfRQ5GIV+wngt4J2G3KPVw==","signatures":[{"sig":"MEUCIQCHY+vlm+37/JbK6TTh7WNVMuR6wjjrHo0XnaiEuD1JTwIgP2KrxnkYB6k3fKisfefAL4ysKuECNhg5IbWcwEqyQ4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+bcQCRA9TVsSAnZWagAAgNkP/0bV4sIV75BDIksqbw3m\nt0qt9yI1KIBnTY9HYgI6cECp6ZvkzKfFpPva4kjJZEEJOjFNU/jialE22pd7\ngMktcL2HttNBAixGoHGphmqsKy+yLENwJdeL++QzJOuHytWAqBl/iK1VYFIp\n7arb2Vak4K5YJRKN3RxZSyduBqwTDP3FSMMDxcDIqTSCO2Ob2v8zN74i8fjA\nvzSBjGmVaEADKq7V7hHCmlgBVFOUMXIk4IObH7u7nweJyZIzMacFzJYzKn4m\n33Rpj0EdU3A7GbFhUBv3kI0VPMFL6EOF3NwFrXogxwagv/x0gcgG6vQuEn/T\nc3fHcxrA0Kzvm5PcX4KIoSk6ou+D04hxQGUtX0uiCuqndueSvqOo1Tk/uWne\nnxQJA0Y19jQyi9IkCKHV+3opG81drT5KKt+MTnAtVeKHKbl1Q7hlwBzhJd+P\n1DttLOOTb7OyTqLDvv1WQvxYxNBqcPC64nSIEXpwHO5MPkXPBuUgH+MgkX6K\nzvNbnFH6vZG4k8upKOTWMghOAgD3uuxqc30XFfULr0NEmLbKSt6h+HIznS2Z\nw+nG26pHlJPPxoc/EFRFjeGRTNtHj/lCZ1hirtBU8FaXeS6eg8iaXAdMdPOM\nUHIaxtnr4AgkiDa3jZ40nuwqEuQLsKa1hZs0CvBjYdgmBpVQo7kNFKbykIho\nHMdB\r\n=dojD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"fdb30f65669ac70b3cf3c6b9d667f09af817f32a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202211224055","@chakra-ui/hooks":"1.8.0","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202211224055"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202211224055"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202211224055_1643755280194_0.21662604534567897","host":"s3://npm-registry-packages"}},"0.0.0-pr-202211224227":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202211224227","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202211224227","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ef06679b2b5d05736c531595e2b31f26b7399b90","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202211224227.tgz","fileCount":22,"integrity":"sha512-mDd/KWk2jjwxsD2/F7m2Rp570BRRX23JzYg9JP5cXvt0wf6SPs8FPzUJOnoTM8AqVgpiDejHf8iiOsbTN4SqZQ==","signatures":[{"sig":"MEUCIQC/c3uUcf1IeN9oQz760dz0s2Ou58y37zvQucsq92mb5AIgUf3KJhmlC2vDTP0W91GuPBfjhuPCpr+BdUqKObSRjCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+bdxCRA9TVsSAnZWagAAJrIP/3AccZ5XSfDdV7MQ6+6g\nbswzWQFU7PJohpJSfL3DeA/6byMw6Zf14PhzEU3Eqk9nWNvhdfgJDBU7iosQ\nI+qwKuTljyYZ9QAn75G72C8fCSWenmrc7lRjOA1wlNH58KSPkyNsuagSuXFd\nDBLvdDdur/xJ9ZR+B7R/W+qWjB/3DY0+WC6yF30YI4Ms5YMRF7XiElYd97vH\nnAKnmtVrW5jqpbybOssYwGS+LvZmtjchDr8rru9xK/JwARnHjLvbnlpRiFLG\nMHbOvo0dAdFon+7ZKQXwGWrDmEltdsU9eNSXFZgmmuoRqel5dExgEUGJOxzT\nam3gku1W9uz0Nmg0l/360OlIimnU77C9M4uExiMEqTyBSWrdlBLoHsQhtWiJ\nCblLGbbIGV+ReNWa/xaz/GsSCaJuvA6alq+KTy7YAapBuun+kg3J9AdaYq+P\nRwmmDKE70Q9Mq2j/VxYesgiGzojk6i0N5E9iZ7aWWLdZDa8P4XTeGaZO2PBA\nNpvYaWxke3CUJf67BmCkoYxX1D5uhj4GK92UJ1jRIHq4zdSPcJ1z76zzPSZp\nkrlLIrBwmZErMQtaIStxOpXehN1FhejRHh3cKmOXVLdgCdqLaPqdgjHdw5o+\nd6e7CFN6mYz+VmeZwd9ZA0ynbvLrZJabSgqbBFbC3Aebq2aBbjXZ1b6qQvNB\nSnBj\r\n=nJAW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"fdb30f65669ac70b3cf3c6b9d667f09af817f32a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202211224227","@chakra-ui/hooks":"1.8.0","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202211224227"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202211224227"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202211224227_1643755377024_0.5419242449377366","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221263638":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20221263638","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20221263638","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"390cd4a439e95c6cc606e53563781487cb9c494a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20221263638.tgz","fileCount":22,"integrity":"sha512-y+FYeSEzpDiu6LMZkz4VAjpnKNCf1nNpr/goA7x+Q/VjmcFI4+qLoJ1I7mHY9NgeR1EK7KhUql9wm1uuxRB5dw==","signatures":[{"sig":"MEYCIQCPZe537HRvBcUwO9STe0GtZcH4bTPRDr3ZKPs4PSqcZwIhALzcjnMmNBHHDwIPRYNmcLqfxwwuOORwBriHmZikkr9U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+iacCRA9TVsSAnZWagAAhxUP+QB80boYdlYrOtDk2yZk\nnjg6YzI8Y+hTp9eyi9wyvjfhXWzkezKVnOC57TlVmxss18faQKrZrYia+Mpj\nTCtEKdocXSC1KkIdpz0+9hskwJJgvpOi+rcQSUsBGUWNFOtCxHIqb0AENUrH\nNUoLL1dM8up2Bh/QaHrThbg+yJ6x4tR2Z/Sz+qxPlRkImHac6eF2QpKT+kB5\nFcIUFF+BICi9LVSjgQGGmFd08OHYNKRTNE4h1rQNydE5vME9c/eO6N+0Tth8\nWyhauTy530DigZE0fiQjx0zAYmX2mvAj6ukSoGefH/t4NtpX3Lytl/DQRD7I\nRW0QNXv2oz8fy153S4b9eReu7sm/HnVy1ClSWjaSYIzYXPS/wbyiHo56G/MU\nwK1zOm9MsBw8gkImmPT8iVnxNcN42GVrtFH0zhsp6344fupk4j2J+L0Na1Vz\nZLpD2vG0bzBK98YZmTg5bfzGzvO5jwboXHVGrHhYeQOf7xqvf4gidYw8haYV\nq7CJz/m7V2shNNGsnLNiwQ48XWVHdRY35YIHNsp8VK0Pi/KPwt7MIKQjvOwc\nSJ32Uouhuww1z7iZ8bIBTH9QqzStN6zEX+ovYlWPyMqBt9GCRNB/w5qBDaTN\nCRP2ugmJFMDMgzB2fXmcRfL5m67WzBBDlgKVmZSlEb4Y8nlk72LhmqVUCpfv\nOJdG\r\n=v26Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"c9eabd5a0528dbf3870b6e127d0da14b6caad740","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221263638","@chakra-ui/hooks":"0.0.0-pr-20221263638","@chakra-ui/utils":"0.0.0-pr-20221263638","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221263638"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221263638"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20221263638_1643783836187_0.6833888853459851","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221263715":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20221263715","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20221263715","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8e9c10ff4d5c224a841844c3f0ab8ff40101026a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20221263715.tgz","fileCount":22,"integrity":"sha512-7MC5anXu5D478p3cKPGu8lHIiK8nwesmre3WTU9idN3twaT4jyXA5iWJWiLd5Yb2YLDpsCg0op7k+hZSNJQvGA==","signatures":[{"sig":"MEUCIQD5n4VNoVenim/SOMgp9TPoejsjKffOJ9VcFHG4j8M+QwIgWxwN7++DEzlHQoBkwFEpxaZNLtruplpd2X8BuHgYAwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+ia5CRA9TVsSAnZWagAATKgP/0S9e4j89p0s8qmXzUYF\nSpXiXCQ9u63vYCaPEtlTso92Ho7g6rlbeyAgI36qPejMGnp65cwiLh6Bzu/i\nQ/QmZyQxqcpNabFOMFVSjALYByvwzhN005j/Y1ZKj1jHRgul8VWSZ+MhJ8BW\nsD/AeanfNx2CUg9Tl/xJ3Ta3DkHXNpzFTBgRpuaMeaBY2AS8AYnPl13Uy4d8\nkg0HJLrBCgyksPJ+YM4nv3XdyNmG0XWgtuFdH/kIQ+fIHj4FJ100ehJ8wyTT\nmsWihjr6rhRabQE5/D3fgrXtNVqEP6bTBFALLAYDX8RjUOWtd8B/vgrQ73Vo\nhVz87HflkSMaWn8IKrisNAXiwfTLg6tFD8qwbvK0DD9pEpLNdVBF7MM00uQp\nTpv0KyoRWxRBVDV3mxg/G4OfgTHQMINWVIb08SucDW/XsSV/rJ4UnU5mZdc5\nM99LhXkhz8P4q8soMRk5VP5hkordBdUpNRLQjTgGImZSlDnkC+9anseaMT1Y\nMjHsB2j/O0/oO35Dgmk+fTHTJk+7SN4IWVl2mnUpmD8Td/3GUmy2LlbseHfR\no2FOaJFzvZhZk4bfOd/XAURIBwtAsKOjjs2+EhaAwpzdqJ77aDhEuUyhCW2O\nFa0JAn9w5s0fksoZmiSmIMhj/pIiLzsI/pnxprJJONimvKhlRhk7+73ihvNU\nab1J\r\n=s3HF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"c9eabd5a0528dbf3870b6e127d0da14b6caad740","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221263715","@chakra-ui/hooks":"0.0.0-pr-20221263715","@chakra-ui/utils":"0.0.0-pr-20221263715","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221263715"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221263715"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20221263715_1643783865254_0.39013577265441723","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221272130":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20221272130","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20221272130","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8d3fe516c3f08b5cd016d567b329e5192532bc35","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20221272130.tgz","fileCount":22,"integrity":"sha512-mggXn8SV36wDUfsQNNGvrGOF4ITxggR9qAx2Vb1I7BtOwO4+nY+mLkBKKXWqj+is46dZu0TWX9nIbxvGgVXnZw==","signatures":[{"sig":"MEUCIGBPg0GxxjT39rb89RqsRCL7kPnP60WGpwxNT/d4nLJ7AiEA2NG/+VHDkgqud3+KUgsiQlPdzPE/ZkV6eOmPWjw8oFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+jEbCRA9TVsSAnZWagAA4wQQAKPNb6JLpzbdt5mGMGYb\nQ5/xX7j2IP37qEbSMD022uUXVTASV8pFECWgp9VCmxv9LVpGM6Q1PNf1PQeW\nZfrfVDnA9G+hSfKfwQnwGIu4gSP9Rz7LAdkc3tbkXU8wVYB6OO7ZR6TX14n0\n6/ZFz5oybM2R5SrCEGhN9/uxwb9S/jKjKttDyLHmbC1lOgK/SlD1EHewbZn1\nXrEQxlQOgJSi/1d2qFdE+5/1k/TBkyJrMgOrMrmdPjkXQC7mmx4ZineLFgs8\nzVQtLh5zS+1VM4OZSsF97nJYr5XlBMgxCsjeDw4hgtTw6zaDurXP8AZQZWHG\nV78za7CxQ6N5vldLNuenR6k1a2AYmA7/YsBTJumQnsvTjaf58ftNlu/zdYhq\nLU7CB0BrxNx39rf6Q8yv+QZns0OfNnblijgMj29UgaYnavH8cZSm5TQnbXPp\nRTLE7NNonr43D7d/K3pltYCznl5vj2UQh8PLH+R5jBmGZxktD2WrI8p0+7n+\n/HFsLmkgNSayjaVtNijTQG/yVRxyEZ57C6uN0PVlsuum38as2Q3lW99bixPh\nRy3X6erGD6HOFUjHC/CGiy7C24qsPLnUrp3YayQP5Vi+hrMU02+4iH3caVvV\n8Pi3iJHrYM1oZtE1d0PIrBkyroC0zIkA5VLLHYBZKwMdJaO1ktWY0Xpl/MK/\npxpo\r\n=tEV7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"3ea8fa9b83b10aeb76162450f2d997d87c4c8f6e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221272130","@chakra-ui/hooks":"0.0.0-pr-20221272130","@chakra-ui/utils":"0.0.0-pr-20221272130","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221272130"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221272130"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20221272130_1643786523371_0.06252896499188343","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221272450":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20221272450","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20221272450","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"255c699f5aef301bdbed832359c08a035631c802","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20221272450.tgz","fileCount":22,"integrity":"sha512-rKkFfpGiWziKzSKiZqkVeUKdSB33wPn/91E0XGAscaRDs3t6k83rZsq6jGCkQT3jNV6bwg4seLidOvyvCQNnoA==","signatures":[{"sig":"MEQCIED3PKen8PcJiJV9bmyr3kbdyt5U00D3Sw6k/ZGa6osdAiBjvAuA5ODAeJvQA64w6F8cpbOat01r9NODuPv++by2AA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+jHjCRA9TVsSAnZWagAAiRkP/RgWzQDhIv4+kIeGOZDa\nuzyD9j9ZMcMWke4mf/b153WiJyAxG/eiLxKW/zoJ9siHEamchQcIv416uxnQ\nBfO6v/CDJaHhYTh+lr5ac/B9n9IXWcdB0wjyRpaJy/wiNd8KuJUrXEqPss+n\nT9LmSbayGiapUFWI4RSshz/8RFSkPKU90HPxlnpgYHqrESGhoH47UFgYSWwD\n3xdTePJpGHD/wUm/SjbbDxpSDrqEfh/jzgX90hojsVo/DRa3J4D5V+oBH177\n9H5A0vs352fpHQwIMtHHGF6bIywkwgbrUwAweFH2qPa0Jv613W9/tUTvZzRl\n8A20xmZtEQXlZFXxtYvoV8kBhY+60FH2rfWShjA1lxVM6W9ZZXp7ViLXaWV9\nlTb4qa9sUuf53VIdHTiqUfM6M84h9ULkLWRSAInfHwvEbWzBLm7cSVyQDCJs\ns307atOF/eNfcWD1r5cJX2x2QONNKM/JCFdu5ajLihREyZebElGDrueBAe4k\nuU+YOOesXVAF3/Cw/bhquglcog+9tE9oIondgIko13/8CISwznghKzKVf20G\nX5FeC2VvfDpy9k2xsuAdEVPRhveo1icTPOjoFnSQAxR10K53PCVXwGwawA2U\nCIva7YEhkw/IGMoFyXY36VnRSTNVgAe+r2DfBelk4PdwICIcv2TpkBnqdUmC\nARP5\r\n=g3qu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"de19787ad8bdb65513c8f2928e2fc65425ebce3a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221272450","@chakra-ui/hooks":"0.0.0-pr-20221272450","@chakra-ui/utils":"0.0.0-pr-20221272450","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221272450"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221272450"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20221272450_1643786723780_0.2772997799196115","host":"s3://npm-registry-packages"}},"0.0.0-dev-202213175727":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202213175727","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202213175727","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2a1c947fa4a9709407cdd2ed5e8d9f1f2b201e63","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202213175727.tgz","fileCount":22,"integrity":"sha512-pdQO3FjZ0cfnciVC4DGYjI51eJfwBzUNSUnXOUmz+eNf4UaHQn7YBjpIHtGljalDCMFSGyF1AwfH21z/VOSuHg==","signatures":[{"sig":"MEUCIFe56PBMJ4U0msdOfu+WiCSLf206gC4rz5ruHAFJWwg2AiEAoH8sJXRaVL3DsWyjycA5nc4v/Qj//E3YSHCCUrZJJMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/BenCRA9TVsSAnZWagAA42kP/0VA93g46ZOBwXiL6Don\n3ZxeTFe0wOYmjavZnoVG+zU7ldktk0qND73Pb/iNFlXnd+8RKj7XpGUVe8JO\ny8U4sgLYz43zjKtgHKqpl8HjBaP7foHzJFaGhbhIk5Q/jKYgcV7KITGVaHAr\nQmNzbKGGQyPaM7b3DK9B5dcTVf4Z7+bEKWhXWLq2cFBJ9qApGFZxYmcmD0L/\nJl957VuYGZ3LtHAUrofihON+lhy99aiEAquXjwrh8ZEbO6S/gPoIrrvPPMcZ\nzs6yS6gjR0tLuhHhCIZCuepofrxXASlyL2GhxCs4ArNnBJBgm5clUXjPZLMY\nEVtZBwCTHUdf8pnE1894QYC2m0C6Tue5AuPfcWfIft4r1oXhir5R1jVy/EuL\n3TzHedE6Er1Y6xwQZst2amvRCJWXy1ljOH755m/OeMLjoZzY9gYehBAINSH8\naW8yoP7uSsvxS3i+2446oWlfrxCxqL0Qehmln7NAszfyPMbFTgaMFGDtsMPC\nqsAfnPAKXdF9/AIihTB0za6iA+Kn0c1rbb+qvlFLYucxjxxSTP8O1yR/dnYw\nwT9B6JW6qeJgUMFn83JMYL1+xugH/BCeHpdfZOVb7T/BFisuGHB7NuOjUl0S\nkqYToDUgACH8UIQYqjTJTBss9w5EYgqBGaYKCdsf4Fc5O0jLdc4UYKFk+zyK\nt9iu\r\n=WdLt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"f149c6c9aa04b8c0abebaa6ac8dc72c7f8ceed35","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202213175727","@chakra-ui/hooks":"1.8.0","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202213175727"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202213175727"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202213175727_1643911078915_0.906738503324523","host":"s3://npm-registry-packages"}},"1.5.5":{"name":"@chakra-ui/form-control","version":"1.5.5","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.5.5","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2d050abda5c9ae7a99e6ce479ad523edbe26cb28","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.5.tgz","fileCount":22,"integrity":"sha512-SsBagzziRgP0j6OQWclq0FqmPESNiGHjlSqSbXddCOipYmTCFG5l34a57UfiznzHZ37itVUPPuZyIQ3reytB4g==","signatures":[{"sig":"MEUCIHGmmJCxXtDFMszAkqCxf2JPMLlgpax0pkizdHUDKcCdAiEA5+2OzbiTb7Y+SpN69c++iuvm9JKGPnpB3tXWS6B+3uU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/BjICRA9TVsSAnZWagAAPEEP/32tXaJiNpYWz+WQPd93\n2Fk//Ds/bw3XhOZZEsA2hw/nq5VThGI3Goh72hL/w8WUCHlNCWJ9BM6I4ulY\nFnLj8/GJ8mTuoSCAjd7h9X0REggvBTbkv5jVUushT5ra2SRJOKsda2gZ2MSO\n31/feMNZM/Jges5OPfyIx/xOm6gDew3EsABfo6jAjJe3waKyuu/1Y28JFVfg\nfSEmEreB6FaXeQ+GiN4MpZQClvFYOFzLwTYAdAOeI5PltmA9qxjgEaoCvsry\nU7vlFlCaHNIYTF2DL2yrBM9VlH8xTQmupLmJA5PRo1qS0j0vD2p2Ju89bsbB\n0+5WbrjHaiS9Uuqpu670Jx4ZBSLC1fuobJfBDM5bNz7oV2lEkajXKB6qofKZ\nexyIO+i6IRMpb91RWseZyVwSjwUEkS8BDFxJTqPD5SQpoNASoxLXxY9qchw2\n+qXnO2QpYecsJRWczxM/agV1jAofWAMuiZkyAurWqH3L2FMIvCAx3MUMB5nZ\nfI5ZfyG2TsxpE9LjutodBLHbJSpUDDk7k9ZA5KoyF4s817iYYXYExyicVTlp\nsMYBTyaglzAmSKXr+qSuuv2jXABfhwA6sZwl6JoESv7RWhd8uVPGltYox6L9\nh+vI/nfOvvSElEPB57/fh5WTnWsIeig4VBwpiNj5kptbm33pUuvUkU9PONd/\niO3s\r\n=7ejc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"bfcecab28a4c8d2492813eeec80977c62bc21c24","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"2.0.1","@chakra-ui/hooks":"1.8.0","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.2"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.5.5_1643911368115_0.03074173753646625","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221462931":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20221462931","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20221462931","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a661e8f11cdfef55b030fb65f3417049a0a5c952","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20221462931.tgz","fileCount":22,"integrity":"sha512-cmkKDfMT8n6brsHh1JjckTbOGyOWBNv6zWXDVeMONIPEw6/mhePYLf2Gx7DuzPmk3HKsw/UMt22p6AqESfTEwA==","signatures":[{"sig":"MEYCIQDu7d03ZJiidYW9SK/gvKxgsQOh0vCbKVn/s8GzmZmyiwIhAOAMLr01Llvrkrf+BW7Vv2bgiF3AnHHURZJiO/Q35fUm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/Mf0CRA9TVsSAnZWagAAxUAP/0IczMTapqc6QPxxC9gI\nGjEo38d/iBUWO1cqmhkiVayBQmBki9ob+ZdyVXJBvyIrmd0WlpmLtLn+iBA2\nUQjBKbWyYZd42EUopLtw8MIkEXq7/xBEnHvCadTPultT/Rsmepma/f497TcT\n1G7YN7Nw87DUZdgV1NRSlyIMLjpVeF349YJ9xYT9LMHS/wMetnHs6XzyiqqW\nbbRuND33J7IaNbmCPlVd1DZqccUR5e1tz7xxK7tKbTWZ9HGcSJdebaRopwCJ\nT25OhbW+32palCL/3wFbAEMJOnG4lvnWmPUprINN4V4BWgepdMlMZTY7DYiR\nnwJg6mTR9f6efrmbgymBRhr7gC6KT2sxFW+FjyovY6z7fdzw3ZSsBvF6LK0s\neGvdZAOP7HDbpKk1jdfg8WLiWnXlGOWhLw7PMuAqWJka9nuAPQARBzYb+GNE\n39k7/eQwaNJSBqe1XL3F0xVv3W3uIp9BoXQG2wk9NddzM5SOGcFLkIEmqc/D\nYs+Q3CJv/4QTAuUHhOMXsqBpkTicClBiMR01JO7j6NPimbJSbGxm2vtT19Zl\nudX9S8JUzjrtAIJ7kXQQ2l7RtkJfYi+l/fkiI5miVoxCS6gV8qBP0ntBJKxW\nSjvTFMnU6FJwTrQ3LGKUgKNFTHByftTWtWYPallOAlACTxMplI6k7gkm36Ek\ndN82\r\n=1GYf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"147c971a8b1b08ef5189bd99586689f0e7c5a383","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221462931","@chakra-ui/hooks":"0.0.0-pr-20221462931","@chakra-ui/utils":"0.0.0-pr-20221462931","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221462931"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221462931"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20221462931_1643956212657_0.5186551060102003","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221463045":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20221463045","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20221463045","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"57f19d5a075f685050a3a7f476719abbe66f7fe8","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20221463045.tgz","fileCount":22,"integrity":"sha512-O3mQNxRBbnjYnsKkJagLn9loCAFarDEL691YNVVPrQkqpDIHWAVuLxBcqBM/PVIjcew8lv/kdxRyNwttmoM8yg==","signatures":[{"sig":"MEQCIFy4KPhPnTRwSDhOfj0fY0QdnUXl/IKOX6YWJuS9fFquAiAJ6p0rueRi5jfsvyyHRK7rIjsuR2wAlIyiovTns0RPkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/Mg9CRA9TVsSAnZWagAATjQP/RAlEra4CNpsgmJiwotn\neg1dU1Zm4HamtWBAwF0ZvJ7XibyX410wOXZFeUCRuESVtLqq0jKiVei+x9Fe\nSHrNCgJtqwQ/angfBHm/5DSn50PARzg07JZv8HaTDE2pDpnfv3pMvIa+w3O/\nLrDnsfbgbvJLa8fzca4J5ZA11yAY2z2UP3rceGusjZKp3OtI9UOSk0FThr9G\nh6FKYhChxJTHVoF7kBHMcucAf86PMTzLykEhlyncfWvNKAEHgIkDkItf/y1t\nl8keiGrevk+azLr1Si/00cILsSng8nGO4ZkXgjw/qqFOYYPAgKBcBZPtygt8\nhnLC36R+oJBbe/koyGaej2ND6JmuXKX1do4x6VYnlz11ydARsusignJxtPXx\nNcmb77QtInmUi0sajERmbYbtiTSQvjUipEr7wF8b4WIVa3bfq7Gv6LXWsmyO\nLsOIDaliPmoyoCFayNEb6XjM3FbdblgFAqypopZSu6fYPFiJTCLi3yPnUFH2\nAi5RPGSLpnQWxkAFooqsU+nM0kHeleAR9qjvseO9kl96FBZxbPGK7zKHY1tW\nAA0y6FnSJ0GB9JpST5uETH7iqeUmb4/kSH/1eyRC8EyPEnz/XHzvvwy/PofC\nEvWTFBpFj+6BFCzQZtt1ea3TQEs0qEz4iT7Y0o6wsXPyBMqhBjEbklY9zIdO\nfgcQ\r\n=Gx4K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"147c971a8b1b08ef5189bd99586689f0e7c5a383","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221463045","@chakra-ui/hooks":"0.0.0-dev-20221463045","@chakra-ui/utils":"0.0.0-dev-20221463045","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20221463045"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20221463045"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20221463045_1643956285475_0.072802132499316","host":"s3://npm-registry-packages"}},"0.0.0-pr-202214171317":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202214171317","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202214171317","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cfb5faa2f82dfd8c32a71426fce5ce094fb8514b","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202214171317.tgz","fileCount":22,"integrity":"sha512-2T/yZaavqaGvyE09/k5mCmjQZmef7FSyemoY0gXAR/ySL/5NEB7T8lwxJqZNm5RoWl+N5Qe9c6gHBkJ2UpCpUA==","signatures":[{"sig":"MEQCIBdOG9FprJ8uYEbLp860oLiWhmXfYYpxeqmTT62/2S9ZAiAvm6tvRm69mH8Gmnjxrcch7gUA22Wz2BST/eaieUrfdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/V7VCRA9TVsSAnZWagAAnWAP/imf7EoDtUj2FVE9eudE\nGEG2PFfUEoIRYbWhA1Of6ooxcgo8Ys7SJPBWwKgHhJFPid08dpKXgxjAraMF\n1Hugo9OMcHTga8oahRGeGxEXLfNUXpwVYzKm4G8/Wrs61iiNmBGkj/d8RIT2\ncV+cQil9S/yM3YGkqAyQ9158cNBkv/3znvqs24jFvvG0kRMvTdYBR8Z50zXd\nQbNotOfuyZEBmTTlllNMN4ib6Gzqke12bA4LgelWTQ/VGDU2VHdBuf8bjkv1\nsG81eC6/9mrmy8beXOv8j9mXsw4UoxB4uNOE8L8fbUTvO9ZxpnCH7ZSaXm4p\n7cRCLGE2oV/5j+OKRmMU7V1fANDytENhec8aAnLeLeb3Fpu2bifHh85gKF1u\ncTIRFlF7JdAkUWEK7JFgXLpfhIkd7Xsm7UELkFPbKmOI5bfZJ3Eb/+jctng6\n/HW74RtOb9ko4YGRiqus/5XheS8QUY9te0/uGecXP4AsfNJz67aS2Qj7I/Z1\nac2uKIyv/VDiN9KF3fNgS9JHPItBUMGSqgz1t1HRta5SZ6/qcJWDtkufuVIE\ncwDVeyPG9utN5CV+pcygmtGoBoOlZOxfRp4VSJZSlGV4xEXy3V/pXfZbLdHT\nbcyDm4db4vA3oSeH1R6ZiZyOr7Hexoc7PyZ0Bo8gOuWorVXjgI+r86Wh1Zp4\nbnm6\r\n=o9di\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"0299e357a2542e035d6bb17ce6072f38ff037e45","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202214171317","@chakra-ui/hooks":"0.0.0-pr-202214171317","@chakra-ui/utils":"0.0.0-pr-202214171317","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202214171317"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202214171317"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202214171317_1643994837345_0.15715969077667458","host":"s3://npm-registry-packages"}},"0.0.0-pr-202214173019":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202214173019","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202214173019","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5b40c76cd065a71e203aa09f4f04301195d1b234","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202214173019.tgz","fileCount":22,"integrity":"sha512-IHIv8OZWsFMJUFy+RbgQyo3u424qjdntGfix9Ovi7KpD8ziMN7pmIkgN31le/b8LZ+I4UWwfcus2V04Sr/wk2w==","signatures":[{"sig":"MEUCICc3GKgCPJAI6nfNm8uKNIZafU2I+4pzy75DNoDTFZ+nAiEAvoLXokYt85mnHcC+Th0lqx1iwjCxGJs1JB3xEwS79Rw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/WLNCRA9TVsSAnZWagAA3ycP/1kuSvNIpu8F2+a1dtaW\n9OS8YFw+IcjOXJhrkus6wQOw+eFnfKOeWW5Iy7kTs/wlxqWJ4xZYk1fKFWGR\ngDxuJasFMLSOTtSTaykkx9p4J+YhS5pBr+Jh/3MeqkkwHVc0If3oafjfclz1\n5kvuLH9xNQi5Fa1upyLLhhanS3OFEVso/KBqZCE2maGp+ba87XAq9T3QtMxE\nZCQq8P8MKLeDqMcp3BleaYtnKiIw8DxjHKAnr+1l8d2oyumtrt7Q2rHLrgnp\nN//AfMU37h5hm6R9Q68/AuxdTQrPOnns1px6Nr/SVW2DpT3JWThDGFa867eS\nt3ToiHnwvhXF9EGA6rbPmSxHwrnS62DPNcLRv88YwfyruWUoZWJhtZjGdlDI\nvysmN5HmSiFJxQH1drZon/r8iK/ghGv2T6qMRoAQmAYKTGLpGIP68eqEx3YT\nM94srWo2RmPunu4lh7GNrE4mGdSWW3glObU+Cxlv6nf5j5rhnIm80nm+ub+d\nFewpmifLX7USHDwlk044s7nPmuLOlsLVUOMoxhjf09qjvXD3G08VeSKbo+Ym\n0n4QLDE+4cmv1L8KTepu3cDkTyO5cPSGmq7jQ9CVJ+6OMIdv6pcE6mvVUf49\ndUTKycKQfgLoPq2KZh/+3gyrVxDiSrrNV9C0bKMwHhbVA+l46qqmnmesVJew\nCcp7\r\n=7Zb9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"99dabea67ae9fd0509bcb8f92867d4f67c4824e0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202214173019","@chakra-ui/hooks":"0.0.0-pr-202214173019","@chakra-ui/utils":"0.0.0-pr-202214173019","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202214173019"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202214173019"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202214173019_1643995852936_0.5150333576784567","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221417318":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20221417318","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20221417318","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a774af3a0a581b8d061ed51d9ecb69cbb1ceeeca","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20221417318.tgz","fileCount":22,"integrity":"sha512-IU2t4gbP3TboEuKyyiNKMS81IM/0VJW4PWC+CWvrRoMxwsm3hJCjHESZMVlUVEE6PdqoWO19MnqkTsyOWFN/EA==","signatures":[{"sig":"MEQCICVWN1APxyRBNLtQGBwDj4n7Pt1SdKO/g4MC8S7f3o5eAiBAfk3cDDC/2J0GBrQrDp6BTE4h38xnLISNY7ca0STu6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/WMDCRA9TVsSAnZWagAAEYgP/2YsNAhW/OZFDDbf4EK+\nvE+Y7ofuiwtALXmeMeVNFGQByj1UTdgdgcmtBV6DvNJqbBnPbiDYFL9auoPN\n/7UHAi2lsXaQpFmzHtAMFqNRbch8hXYWdaejwlxLO9C4gKy8Mc6gjfUmY84p\n/9qCUVSvaYnQAr/vVIYr/cL42xWPNHgrw+XracKVqx6MBP64T5TxCrrJK8Jw\nHiczF8iunPAGp9UdgeEAd2nQUQJMTv2PJXZsZvttSJkKFR+rujiIAQiXl4m7\nQ3aFxKHQBV4Ju9Kp0FINq9KQH+BfdfuvhIksaENTgqXR+ZjVIr9Hkn6npp73\npkWnyZJf9LHJ1OY8h2YNbsag9ji2uOqCg3eC0AJLf32sAJN1J9Hxx8Ls9rIJ\nCAGZgkAKTF4Qatxs9FB2Rjt6L8YevPX1s8LibsdasUNsORSPMevquXxf+aUI\nymUxgufFbGVwy+V2DotrFrsxQHccubRt/0R7BRwOqeq8piTjTi6WUOyoSUOe\ngsC9JrhyFBjw4Ta2DX0Fr6/++wngBcXCEPaSc0vMCKdUb6nqhDSoYLI0h1oD\nWrYAPb8wWDgUs/rqwtCpBR10o4sKwTcU/dlpwk+yRfmqBaXMAIhTxrcA8DE5\ntjAzVIt6BpqDsZvxb68P/zitEdSIGWM0uTADNQNgTdbqpNyBVdmi+C2lJarB\nDT4o\r\n=emCD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"99dabea67ae9fd0509bcb8f92867d4f67c4824e0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221417318","@chakra-ui/hooks":"0.0.0-pr-20221417318","@chakra-ui/utils":"0.0.0-pr-20221417318","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221417318"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221417318"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20221417318_1643995906547_0.030297503159242956","host":"s3://npm-registry-packages"}},"0.0.0-pr-202214173148":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202214173148","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202214173148","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fbb126b7073e4b3e9b88a73d476f1ae9ac57af76","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202214173148.tgz","fileCount":22,"integrity":"sha512-2GVh3juUBN3NkEuM+U73T7TokCmyrVy3PDZzEFYLb8h+siXmdLRkFiHMuoZ0zAdOZ/aZG/YcjzbyVHAwhZSAxg==","signatures":[{"sig":"MEUCIQCrt9PXKuNlLGTE9ugVrqC2SwfhSzz0GPcEFoOo7L0FMgIgRmvz1UGN3GkrHW6Myddtya/DbxjXUOr0fBKOEmmGgYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/WMqCRA9TVsSAnZWagAAjR0P/2+iblhLg+uqRJkT31ju\nAkzCwunykoo6oZApFugCWAaAiDYLSYv4oZ5Vo+0Mqj4cA2dp/A2Pcc7e8tNQ\neX5W3r1PhnD3Tnsksuo3bLZPkMNMY3VphZLLIDF7d6EXAiKXfrnft7UIZ0or\nywaa95zU2gJ42+QuOJShY52h5e+Pt0awt2bqUE7U8k5zHb0GpJWRCpFMIjoZ\ngVJForuM/jcQqy9KbTel1Df8iGm5KzcZaOGdNu4YfU8NBn48pcmFGZsYpDgx\n6osrAg/4zBO6MKYxKmX3uiJ7wKzMipEkitia+z0baa8WyekQ9g2wfWwMaDaH\nNYGzeoDWnm0r0jrb00OVtVW+eN8w1lkLihUzLTqu6zoSHAVK71Pf2F8Xx0QD\nSE4rC887ECG2CGIeJAj5k11U0aAqgQrtUM7h7tcKcXpJc5JM7aWrnjKKkms5\nfqNaACShqqOgC1CoDzT0+91RUpQ2E7Xt1n7kqWiJxXcVcy1Bzm4UQ4OTu1jl\ngIyXPtDUV0VUOUMxLd/EEZqzCxyCz4+rl7Np9uYBRagxuFXiBgSGi8Wbcxqa\nNyyGfK2AUk8ZAWGTEHK/g7R1cacECU55OhGMGFF8tUVoDyM4iDNXlGHVQgHp\nWjKbmcbOMdOY0VbJnrCJ6STBe85NxjV3czzGsbfI2HIc1sUtJsC99WXRRu4F\n6z7b\r\n=VUn/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"99dabea67ae9fd0509bcb8f92867d4f67c4824e0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202214173148","@chakra-ui/hooks":"0.0.0-pr-202214173148","@chakra-ui/utils":"0.0.0-pr-202214173148","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202214173148"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202214173148"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202214173148_1643995945859_0.41656877541129567","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215111823":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202215111823","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202215111823","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"634cbc548cd27d6d5cc9364aa71dd80efab5b6b2","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202215111823.tgz","fileCount":22,"integrity":"sha512-mMrJA1IfmTjZWbJAXttMIfJmg19KRNUJBSAVV952E9MaKqy41HDIQWIVDFUuVcuaC6Woih0uM5Kq+EYOY+Uyng==","signatures":[{"sig":"MEYCIQCzPbUsbExcxk88MyJ4K3ntESFTk3v06vt54twMY5N2ZwIhAPKxSlDTyGX7retQn3fqzu8DosVMnx62+TiRAcWgEczR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/l0kCRA9TVsSAnZWagAACTUP/1rSKfvNFc5cqWjr1Sxy\ne7z7EtyIQ8XTHeF9sfXMliOwAF2jcjX/XuH1Y7bpkSCishyrusk9Rx5nkAYi\n56P3NogekFyTE6le5q8xNg2MREMRTBgKc7uq2pjOI24tsdBm8Vw+arftdcEh\nEt3fI5E3Ii5Xu5ExR1EVRy4wAauVO5pTRDrA2VrWXrJGRWGe1ByVKvyzhZQF\n2XH/XrLfv8F3FJTOnvM3upx4QaJV9kKBVuGVZZUSdjdPkNnMW+mPAOUdgefW\nYfUN5zWp73t8ogZQtrY1vf4CKRRXe7G1dqPDXDXga11PThHPvG3OSgANCQdT\nw68MLKtmJZu2QpFSTDfwtS9Nxqv8sfAQPeW6Z77g5tuBhTJ9lAY5/lfOdQ/y\ngELQfZOS+KbEN1u5ueTQZ+kEW7cT6hmUw6ONh3xOKzdMxPiYFEJR7NEg+hyk\nK/nnhLj7CuUdN4V46pCObE6hYWgKnQMeST4zfwZK1RJmVQiai+xMOblgwCvb\nq9prILHmNj+HZ0Ta/try+RforCqapX4qMCgtiMGJV+J5eG0TdFD4OX3XN3d/\nrzkJDMoyDOxV35NmKFK8aivnciNbB23TfcfmNvGiHCv09fkObZwQ3a1/ZuXk\nl4E2f/KkIk7RuWC12rUcln0AbplCEE/GK4CIQyRIuDbJxa5YUWieg10USAtM\nnpuj\r\n=H9fQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b6ccf0dd2e3b72a5b50c9e1c00f1e6e3f3b68690","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215111823","@chakra-ui/hooks":"0.0.0-pr-202215111823","@chakra-ui/utils":"0.0.0-pr-202215111823","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215111823"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215111823"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202215111823_1644059940304_0.05613900713441078","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215111945":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202215111945","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202215111945","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"892720a654d761edcd390440976f82331a2035a9","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202215111945.tgz","fileCount":22,"integrity":"sha512-mA3Q4wyjmkoF95UtYfeyaAbpO4q+zSt5YjmRv/mt+tXLRxOl0UGrom7WtAtxuqOFX0ucvpdCmQIzLoSeYkUTAA==","signatures":[{"sig":"MEQCIB8sUmysRbDo4cumtU1jNPaFLMIcqQdZ670ALQPL0kUqAiB4ET+gP56gDweSrtEtHVoubSJBUUgJ0sDURsMRa/6S5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/l15CRA9TVsSAnZWagAAi8cQAKMOaSqVWKfZpYrjhtRQ\nCIngku7R6wYD+hj8SAnowWzmEoqtscES72TqvSu3klTwnAkFz/7Jxy7TDc5x\nu3B2mFwHhfXkEPBtIa66yf/qQuEHZaEwlSXQ/aXMHS3peKAvqeYDmwT5pc12\nhX5uAmD/L3C3TfVgKh667ifEkPKRvNTodOOQWDAS6zEtjkuvxBfMz08I9Kt0\nacDYs0683RF6LL35fMRJugzrqJ6WNWmvSRkNm50zljJkbptTtpCnA27k+9Q6\n3PTcvYzFRtLwDZRqogl9NQFigJxND2IzZQuE8iSim041w+BXDOsv5OU3zrHx\ngcVmntyema39HrkBG0Fu9GkS5DAxkkLXvmz/h10xsALpo3q1Vn8+byfla96m\nsjx0HsXsEwuTb7ReFQ1Od7hXMJsawcgH3iA1zlmZSWZG0EHFFXitS26tY18c\nbOTQZ4eArFpfKoDPVJH3uDlVf8N3DIqOY9bplqP3epO2MXKtl+xuZYl7/fGL\njsDLRXW3mIKYDStFmz/9CRVfAYk/iMapVDA5unjy0f9fUWY7euPlAp6FWx2s\nUm4XskZ29+/QxxI3uj8/B+iAh1oWP92GIneVJOzErwRcrAurLhm42hjH2sUK\nZmB2x7X6MWHZAC61W/cgrVdEQO1PnF2+NmIg9Dp8MhWeCi31f8EpoXtoIddH\n/C8S\r\n=QQFg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b6ccf0dd2e3b72a5b50c9e1c00f1e6e3f3b68690","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202215111945","@chakra-ui/hooks":"0.0.0-dev-202215111945","@chakra-ui/utils":"0.0.0-dev-202215111945","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202215111945"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202215111945"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202215111945_1644060025467_0.15293020905001864","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215112739":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202215112739","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202215112739","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6b3ff9f6e631aca12a85faa4ebef1eb2ba5587f3","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202215112739.tgz","fileCount":22,"integrity":"sha512-d4qYZbnh7vyhf7eHkyoP1FvVSNfEi0mo8y35HuEpSnjyvxZbknrTcMmt8UxrryxkITxUvdRp+LFWh9vmOv4n+w==","signatures":[{"sig":"MEYCIQC641xkcWNfucyxa400JE0dE/YYxKyvt1y/5fKAwrh8OQIhAKbPi6Jh1TrT9xnNxLFnFK+aZCDi4fSLN1YnIOkPPdYn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/l9NCRA9TVsSAnZWagAAk3wP/itzzgC7s3BTmo/Y5GjQ\nTpJmf3DXUQfy4dzaZp9HS73RJiRgddTaTwoIZ+dPtebkad/D9pTU6/ciWihM\nlLnPelCyMczSZG7I48lTkbPnRcsdoPwOyl6S7IRAIeRDd0+UYTFwZ5zAfNdj\nUiEvFWGdHaJhBdD2DKAv4LzwA8qMLwgaNHaT6NsyEPtgf4pnKr0pXJEWoGk3\nfD/+6jsioybgLzUu1fgek+BtJUMf/R9GFNXT8jQT2U4AlT32VhEUEX02WO5a\nNhI993WjMu4WBzj9fl6MBlyuk5LgIp70z46nPXVoBZH2YHF4Y6heL6L+a/n/\nuSfECse3q7SamJ9WE+d47jnNhGtQjgOobzSPJggHvsP1H8/VF+wLINdjPS/A\n6iXWo3IPKR0fetXRGhanBNZrKFQ++qawXyhqoeqXTbVV5zpTLjF6cDUGBJZl\nmPkLCMyn5czhPYUFHbOWxuQ2yb9rg76yHTJ1I5Mn/wjQQpZkXEhUp5QYKmvl\nn08ly+6Aj4+Wsdui+0Rxhz/z2x2lgDclJ6wdzdjRCM39PY5ZDitfbQAlyTO1\nePn+Y8KilRYK/hXi8iffFHPm+Huo8pBAYi2VY+n9y4Jlitpn54T3tRx5QxnW\n1KL/u/NWEBAH/eVDICekmwuBFdc0cbfCaAI9qIrA7pAYD+OmsiueVLuzzPZW\n9xQc\r\n=RDwo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"d4d18b77576549ceccc8adf91b4f9debea1f388c","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202215112739","@chakra-ui/hooks":"0.0.0-dev-202215112739","@chakra-ui/utils":"0.0.0-dev-202215112739","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202215112739"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202215112739"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202215112739_1644060493349_0.3151851074625791","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215113521":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202215113521","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202215113521","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5dd39baa6419601c7cdb6468bf9d8cf273ea96b8","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202215113521.tgz","fileCount":22,"integrity":"sha512-Vokm8od8PbRh0swdWaStmpxXlquZtAA5k+lCT2kEpVVgscfyysL/D3N5mAIcXnp/xoPWXWXCKyZ3uzugYC0DvA==","signatures":[{"sig":"MEQCIDHAF/lWvwp+z7VqVQFDmjp9mWM6w/LuPK1vapoP9Ul/AiANBNr5GtoNQLPrHDWOeBg85MWAcVJbRnUyZBED4V01jQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mEaCRA9TVsSAnZWagAAv+gQAINF4rcD8PAxWPVbokwp\n/Ah07tTo/SuBFZb71aoPxAnwFJnSnM3mtrpQEC7WP2ZLuWniT/+Cw+VGFwmh\n+7iGA2amxDyTEgCS2RWDaDmQoXSi1b1qwdmstbrssHWw38UPNozxHCWRIgEz\nImvOEQnHCgawxoEgIrRocd3OcDQ5D7wBmxeweRaE05Cu8pN8hdy9Ew46124Y\nUMqLoCSdcbbnq5bc9Tl87C36mKRTNSc/TjETWi/lMlEdJxJgEfvcXSH31YsW\nhU3PlFMun9pDjWM+8zOuoRAxkHg1lIbxqCC2jk6OA44dnFZfUNhPxdE1HYTG\n6oo7Ojlt/+KbotIjr1hNmViGlXVLUOOJORsy0hGvg4cSMRvMAMFnC2IEaHPv\nozev/2atEfEqcP4bXjZk0p/uRkbbHTmNUw2GilNySBhgfx1WUDHQ+NYQ6geV\njgQQfLk/2bPjvF8ktYJaokggH0oGuVzobAq2q9MBPbU9Y1BTXkDVwdNN8yBn\n7lDrmZNpiY82dS4ECzLnjfNBKJcNjOH/z5WMMtZR0fpxNLBIWJWPJAeM3D55\neQj6dC12tfSSNMQIVgvl7dQPehrZ1xgKZq1OqilgrntAUZvQzvCMobmxVFyn\nJwdyXpBlQjEnss81XgZXoRMmGeKq26WXWgvY3wSNQoxXA2YUHySC+sgz2Fns\n7MlV\r\n=+Hof\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"ee0744efa9df4d216d56af53ceb4ef6a8adb40a1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215113521","@chakra-ui/hooks":"0.0.0-pr-202215113521","@chakra-ui/utils":"0.0.0-pr-202215113521","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215113521"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215113521"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202215113521_1644060954582_0.9074898614787847","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215113950":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202215113950","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202215113950","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cf8501cba31ceb2bba0453ce34876ef8a36715bd","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202215113950.tgz","fileCount":22,"integrity":"sha512-sVjFmB2pPlvCw5ZogEMYrIFh9GfcKs6/HyE6Na3MZUpqCTO/Ixas1glrXyPO4YCAaKmwbPiQ8tegNWkMdaepeQ==","signatures":[{"sig":"MEYCIQDYdPGeZvOxkSR63fq1G9gnehyqArc7eqg9PIqO4Ho5ywIhAJvkYg5SQwOmtCGUdMKI+yE0WfoLT4UhXuSnktbx3ZdV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mIsCRA9TVsSAnZWagAAHUcP/18liuZ9KhT+w6Bd7nhn\neZY0XYKSchcxrrwfNQmkxZ7ELyhL7ijksjlyEmgdlnzAlFuqlaBvf4NpPv6J\n2Ej6QqqHi255nzdEcgAMUdd7GQ0SPcuWkUVzbpU4Izy4e2M69sbax90lQ6o7\nS3WD7tAypGQ6/6aZFWYd56QdywXCP7mzU81JfGjf9mlmX3WmM/ERCoAsf4RE\n9OszfJlKi/2/KRIhFdUVUKm/PeBHT0/MBxeyef7Z6Qr3uJK3/labcEw2qLuM\n2kCAhY2xroLh8/HiCNp4M1ldNkbH+Z4YlM37aVBDZXfQmhcyuVjFNANxOm0c\n2txP2qk81UVtB9D/Wj7xDPYlUuSYaxA8SFsvc4HZYYn/l57tEGV1sVPQuJOF\n1UTzMzcZ73O73fvWri7hj+V2AWWEmLNOiSevL4FbTwmC9xcBe/oRdOckMYK9\ncbDC29CUtijoZe0Pf9puL/c36ZtGmL8sJcepsRu6MLYrPFbBWFqNlJwNa2b8\n45hIqWtkWtwaRe0SljD8aA1F/biDqeRVi1nSWHh1nsTRy424QtN4uZ7Znwnz\nBCTmXwltJC6EZXbNswAZA0CxIE5mNFDplSMPncRSL52iqNv4oXFC8PXRlZDZ\nEYXYHEFyKgBK6mS2H2Njhd/1ZOCMEDXo7mCwgdShemRUQ9NBpQoFOvLurgpE\nTJWE\r\n=gfjW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"262bd66825aba680e1cfabe200ee57e8d64abd7b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215113950","@chakra-ui/hooks":"0.0.0-pr-202215113950","@chakra-ui/utils":"0.0.0-pr-202215113950","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215113950"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215113950"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202215113950_1644061228621_0.7117555846003214","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215114149":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202215114149","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202215114149","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d2c79f55d7e55dacfd165099582dba47d97c8d1d","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202215114149.tgz","fileCount":22,"integrity":"sha512-OeRLoFApoV1te8YF0nFdcnvZHskIVuPC7XgzRJEg3xbDqV0Aey3O7ovlvGU5n2I6IhRAVLTiCaODLRJgKlVhwQ==","signatures":[{"sig":"MEQCICkPh2vh0Lz2/Oy3GK2N0dqGFXuKsfnzymJkpur22PZ/AiBHnpzICFlNKUVy62a6VHkeB6Aozny9BWnDlFjyZMSECQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mKlCRA9TVsSAnZWagAAb+QP/0xfIzznY1JVRwmHGTDY\nbIrd8eujVgOvUN55yFzVmM8zLI+trts1g1UfsZFA32IA2PyCjS9BIMQ1oG5R\nmAtnuSdzUehn50lALRm7QUoXDigDgHztUgILLCzGgRtaBpRcC2lsUK6gYIEy\n8ZnKFQwpvVa8SLRQcTq329U6mm0limpb1Sw7wk7OFtzbtZJ2mM2drz4eb5wV\neKnQWAUcR9Hmyyq+E6FnX/Kpee09I726xiaT2zSw9tsL0vwkG5kbMepV9hwc\nbdya9ND2+pERrMv9CqvGkZOri80IyX3RX6Ss7+BJcPqWRt+JY5T2bnwCofjs\nB/HJ5s+cLQAbFY4HAHz62h3fvDlORbTFd16K4QgZY7jC5lYaAbM6b9nTB9AE\nBGqZRNLxRLHdDnCGGcgQgyRwdRjonJ034PUWsrurkSzSSv02uki70pJK+l9w\n65jcIl1Urz6JLIc9einmJn5IvEhOmkCEtRx78UskWMwOVpcdnQY0DLLbInsA\nXtXi4E1dHpKTXTKNQ5mMMxdiOlajgEqAy6o0D5+Qiedw6snGE3D7pu8/6jdQ\nHlbXwFxtsOucCywdlwwMojsWBt8ZFiBHGZDaP2gO/ymk89CxpzNzDDR6gN4y\nG1kmW/OmM3gN9tKby/ohPHSXYHUK29VbRxG1mKSPu+xem7Xg7ohJF/+uc1p4\n5TUE\r\n=+O4/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e390806b2603abb97fb5e151abd46710291025d9","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202215114149","@chakra-ui/hooks":"0.0.0-dev-202215114149","@chakra-ui/utils":"0.0.0-dev-202215114149","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202215114149"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202215114149"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202215114149_1644061348967_0.706326377813782","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215114422":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202215114422","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202215114422","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"41ad6495f2f34576c456add8dd11cf1af786d044","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202215114422.tgz","fileCount":22,"integrity":"sha512-2dLeFXL4/cYFuZRrRhieHUz6YTsgcHs7FyySzLADDqqCWgCmTiqXvGnkhAZxbZUVf3ILqVfz+pnOGqMHmv0GEg==","signatures":[{"sig":"MEYCIQDx7gLNxPdHgaJ5y1ZCK9159ChVX1XOeb9LUgk06dAmbQIhAIkKODHv6cO96hI2OxPPWeOITtWbD3J1ykhcyYqzY0Mo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mM4CRA9TVsSAnZWagAArXwP/R6v8reqd4Z3GHlFzd3U\nfrx3i0EimCeGw8XpwPPMF5Kmw4eRoL1kEC6dr2zjPCA96JD/kmS4wcw1eMcs\nKixiQ8FuaWqBFm9fgDll29j3Z74qcwDLGrnPTREg39kk1BeXvOLlkh3IMcja\nDNlqY5QhcDn9hFASQIULaakSwtcxlE5vuyeis2QxgAiJemFPFcPV5f3jZkgY\n+M3Og6hGYHBuWuG5HJZdlX+OlQ4ORRU+gzE37Ayj2XaYuxeW/hDvmEUir4Q0\nlr5g+fjmiuvVt9nZvwm4tDdIgCrSubEME4ofzYVqPCcpZ9X27J5hSwevHznT\nzQMCkcpl1een8H9Co8Mg84Qe8rZw744Zle6Vd7W3Zacd70jYbX3R9EKssm5f\nR+6y8j0q50vPei1g0WR5ifQ99QsFYnLpexUrEJr2cM3MQMPfFcsODwWnrJyZ\nuk6gAh9sGP5CfLSVuMwhwiZD7E12zDo6F8T4NbfruazIkAdV/vmjOs9vcmH9\n+h2sjI5SP+zqDQ5ImL2G5UQZDdcrtPADrEbMbAxTbLs0u9To1iWPEY3XKKId\nHODsXlKiv4IGC7gc9pub2qwvyfvPCMENcjDutXDn6tPFlGYLlBlAt2ieQ7Xr\neOFba9oTK+iydkvqJBbn2WjGytxRqYa48aAU3GrQVQmu7Jow12MKATsCntMo\nELto\r\n=TB68\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e9f7f49d87feb32a355d3083a61447ed5d6e23da","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215114422","@chakra-ui/hooks":"0.0.0-pr-202215114422","@chakra-ui/utils":"0.0.0-pr-202215114422","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215114422"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215114422"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202215114422_1644061496706_0.5087241319546869","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215114442":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202215114442","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202215114442","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4e5df833934d7dba46384fb0b9ef1265d74979a9","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202215114442.tgz","fileCount":22,"integrity":"sha512-Jlp37YbwMZQwE3R25vvThgh74AkMnalSyB+5rVwDaELLpOTjX7ZnGTVqH8wlByHa1JfQwkKwGzckj1N4lGOqpA==","signatures":[{"sig":"MEYCIQCrjPrrK21Ww7p12FcBEWm9JLuCmOZcM7rokVa8EG676AIhAPZ6nYSVmFd1KOrsuzfar/RVha3Kj86WD6PRmDge+2FI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mNRCRA9TVsSAnZWagAArN8P+gOhMf9xedj275GD+esf\njL6tNvQF0cg5S7m/YCMfchMmT96ICJi0f1OACTm2yeoYez2Vuh44LQIZm2FO\nvcsDY6IETdY6k78rnidiamzSr5P0CzVYAnvxj7+8WI/fT3yuNekx9WVnOhFf\nZxXgIZ+Uzr3O4+16Du2gNIEJ0qOd4IxQiMxWW24AgX3nPcskrgiN1oWHx9XF\nz0nOIBendTR3rXv7kICCU2BcH/PqFT542iBwqUGd6VnZDrl124zWqdXUBfsW\n5tPv6zI7P+2NgYwdHQGky6thXmhzMcxDThfy8clTywy9Er2AsSAc5/CQKFcV\nnIZi8HUcfft3TDoyOgq+RNA+ML20mUEsKxDEmCPaEzPLZyhNprIpnfK8kx3A\ny/JJ5sKJSqgPfxw8PHqG11QErCdIMS+7B5zb5pHYqafoioznCx/ZoOY+Y33l\n6LfOppwwgFhvJiZrr14RgPfZc2DKtBq0jwVPpG+Jd4rXXhotjzFFeWVTcy6b\npBnw6ctci8bCYnVeH7poemAuFaVXM/CugH/zrLMOMPCXwrZnXSLaD5QKDruG\ncvAI9t2gZdmGfb2etiOt7r1wti3LEeLPc8L9XjsIvaAHGe0FU4w44Yej6p5B\nKg82i8OCCOkJ3zlQBqYnyZHA9SbUWjK3wEBRJhcAW6P0j8FkkAfXF/BoNzS4\nijII\r\n=Ip/l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"9d81c6de9ba2ba6b02681d5bedd8f7f5105a3e71","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202215114442","@chakra-ui/hooks":"0.0.0-dev-202215114442","@chakra-ui/utils":"0.0.0-dev-202215114442","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202215114442"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202215114442"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202215114442_1644061521780_0.6587614532643291","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215114917":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202215114917","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202215114917","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ae33255e6fc169a23ff9edc3aef5e54aa17ae0a3","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202215114917.tgz","fileCount":22,"integrity":"sha512-6CTAM3J1g4iDDk3B2dJlAe6NHNNaQR19V1DBhHjigdb0A/sHW/VasHRGZtN5+ZFZA+WvGE9iKyNMZ4uSkn1Auw==","signatures":[{"sig":"MEYCIQCwpqLTK1WRevML62l2G3uS6CyrVWQugE7d/fCn7/7scAIhAJFoKhDoP7kyATN1l1FT8xClBbnBeCyjR6wO0e5Ft3K8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mRlCRA9TVsSAnZWagAAPSYP/099idjaXqrPMWjSzoc7\nWU+vTJT9SMsQV9e6+UNXp3nb2Tmu7UXvft/DA7yRHS5EwsBqWkJTf2vlB5j7\nFr4nKHHKCftfo5Nmo+zaUFPuZuwTTp8wexXx9AA2MfB5KpFsZimbn+5e5fji\nJHaxuCTu//hWvE5oE+/kZw7wXCvM4r/dMt8Y9HcdbPU2vzENfQm9Mj+Xkvmt\n7ymOYgThgos8gPX5bZbGl1jkztvIRSiHlebsaTS+cmmHf2uS+y/5IT1awlBC\n9f+wP07y5A2j+MmgEbya/2f01EtKFaA7RP8GBiXBDblxQKg8RVSJMXNyQmaa\nq/XB0wk0MEgvvmfo3mBHzMaQmL4GsUuErx2P4fRkiD18JrQD/P2WBWAjkIYv\nNK4jQIfn1myNgY5TzyDd2glrA45ACrar79eTcCsOtW5xSc7cQBR3yaR0RgpC\nX/tW1FQU3Dl/xxsS+prWDTbC6m9WjGwC05EFCPM3bOm3xma263cB+iCQEk9U\nW2dk6YWdlwZKlnmIRqitEpV2fuUHa6dO7qlRKe/P3M3hj1fdWD072THKVpYQ\n6bsJpgjTRvvtGkBPS9kT9K44RW7tz2FmjK7afL/jz5Ld2mY1RNqJA+G/8hwb\n05JrPmmr4CczA0J6FDyhsGXrNDRTzPhYGwBYt46aeeZM899fB7W4TTUhYiLP\n29xV\r\n=m0Bs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"fdfed43beaec88a99ad8963588cb988d8ce03d58","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215114917","@chakra-ui/hooks":"0.0.0-pr-202215114917","@chakra-ui/utils":"0.0.0-pr-202215114917","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215114917"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215114917"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202215114917_1644061797776_0.6037225000773276","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221512346":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20221512346","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20221512346","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b06d4cd9edc25be1dc449aa1f07725d343707eef","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20221512346.tgz","fileCount":22,"integrity":"sha512-cRjkHI2UspworZd68HJFpfhGvJZtw1y4ZfmhQ2mFA12KpOclqMHDtb6PaRtzUVv9fGwJ02VXGATBZn586l1b+g==","signatures":[{"sig":"MEQCICfTHLIL3EHs0n8+YMH+9lELe5Pk79ArT5RUnYmeDu68AiBo2ORRtCYHMf+ZFJQFNthC+Ep6K8m+/+F3M1Y9az+gAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mfHCRA9TVsSAnZWagAAQvYP/2NpjDZXvx4RGo0iu0nb\nji18iHWIFNq5O5JeconlF65qs1xsVxlAuLppzBZCOKbLozQqAUcBoq1CDsXX\nR4rZBAkt69PyRRrJ01Apg/W7b7LdwK9bSLJ9ERso7iVPGZVMIXXJVBY6gfIg\nW8gpb1BhS3BmrlV2LkDJX1qXPXUQ7IwCkRYo6v0UAYoPeiivJ0M/Xo3BCILh\neXIHVwh8T6wjAAeLpO073tkZpzOrSo4BFu1w8LSmqhDLOwI2zx6hAW/NKtxx\nNHoznPM8P/q58P3StZhHVi59+wzHt2V/EeVuAbj/12KkvkXu8fWDHpFYo+Ux\nCwnEZwO5nmgo7WcLV82UnbAhh4GPsKyercvOtwZOcsYZ/t1MLvVb3noUHw6H\nbcXPnWL7jS0MX3+mZ76Kf9ntprsyaVyMHkcUG3QFEZzgFGafngQx0KbtL4Yv\ntSW/IZN2e/gaRq4Lf3WfmuJfut54nEAOBhGU5NbDgdbs1K4pRHMldM6an71q\n2aBj0QMYTaWwKNo3x1LVwsueOTa5W1q1SGRfp4OStpqxWto8pJUz0tHCf6Sf\nnE0R3Tc5v/BiguIC0dfKOH+SqOnUUxsbxL9cyEsoT/7IS/TOoYkkT2D4vHet\n076Z927NTlN7BnPSQRYkejbJcVzjmY8BknaHv85kqfxCAbVvN7iwzUBvTvO8\nyqTg\r\n=Eyx1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"8638cc8ee0b9a375eaca24a354e8f290f8f2263b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221512346","@chakra-ui/hooks":"0.0.0-pr-20221512346","@chakra-ui/utils":"0.0.0-pr-20221512346","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221512346"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221512346"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20221512346_1644062663460_0.9190971988826073","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221512130":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20221512130","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20221512130","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8e9aea1238acd7334da1dc2faacaaeb833ffc2cf","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20221512130.tgz","fileCount":22,"integrity":"sha512-kv6VXr0W2hi4Rons1SwfIMFL6l31bd9jihCfY5sDFIpRHdnKIz/WABK9/4P/KzDCZBnstL1bq1R3cetcLQv9VQ==","signatures":[{"sig":"MEYCIQCTaKw/m/E8OVMPJ4Krz5aR3hKc4AMu7NMD59P8xuTeuAIhAKCqOXplMijflVoqcGja2oKAVh7jBuFW5kI9y2fnYZir","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mntCRA9TVsSAnZWagAA2eYQAIumNfHBhQPoIguifQPB\nv82ouFOw8SU6yoINTAlFVHwjspY9CVApm24+ExyofHtCQAe+T9beWt2gM4M7\nLEvFWJ6galbG6SEkliPCyGicmH9v74MEiFwteOGFJ4vWZOc8ELruS7Nc/OzM\nTQZldGU80zEA77wFGTRsXfKThlkxqr8k0uG+g6OK1IRdoZSpQMfboaahkx1/\nJ2JvRIpZ4jXkQ2bm88IN/GY3hyFvSO/oN1MoMB3PzsVLSFNEY3kaKqb2Y4AR\nH8gNt0oxftQjHMiHPpqnM6US39/pg8LSvoxYLHWr1SBHghNpGd3aE2OJbVHy\n8FzehYtugbtDJYT86Ba8awP+/HnJSGkNCJj/CRd2t+3tXhD46GHFWcPsdBZG\nebRpAj0Faea1UP9XDCAxI14DNWVlySV/7GRS7XwU+NYs9cTDIjlDK1PeStGJ\nhJyY9WELBoge3lBbJ9djEC7yrZOoLrbgfG6HSBy2dMHF+3vpSd7jn/HJQ5vX\nyOm3bq8ADJtWW2fYHsBkhk3j3c1Z+hn1K8Axgqvk7pJsYDIvZkKK2yLSlosP\n8AUjCbG8MM9kXrJ8B6b+bzMaN28XU4SgZPvCv9d2B7G4rae89Ct1XElWrcsy\nGH0OXw6sgB+kwmSDBMr0bju38BbHm0PGPLjEH5ILrQTmoxSqlfz7Ncy7W+OV\n4Wtu\r\n=3UAV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"8638cc8ee0b9a375eaca24a354e8f290f8f2263b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221512130","@chakra-ui/hooks":"0.0.0-pr-20221512130","@chakra-ui/utils":"0.0.0-pr-20221512130","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221512130"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221512130"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20221512130_1644063213463_0.9567360782776477","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215121320":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202215121320","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202215121320","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7173f78842b926fecc20a1e5dc7b4af9960c2385","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202215121320.tgz","fileCount":22,"integrity":"sha512-+BAgc+2WVIG+CIaw5YhBZoULp30nzAQ8NvmJ50HBIZsVLvynNujS4xjIUUxrwxa0p0bPtPx5hZQ3/mtsA8oQBw==","signatures":[{"sig":"MEUCICDxqozXuB7N+kwWvigFB+KYhA6LzH5VhcBCe3yMijiWAiEA+GUog7qWI9BQ479JtM8N26A3JgUAYgBTsBu7VXCXIHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/moACRA9TVsSAnZWagAA+SYP/j95lTfsmoknDqAxnYxU\nSm4UCUtS04B4SOJHwO44YCsv9wevom0/YkahqIRqIetxfdcdoKyZGjZjuoIa\nnf+Nu+vObM48eYmI7l09/uS3aAkjhF6Fmm96TuaVnBjGCZ9gZxrJ6IYdi9Jr\nrAasGZjEpMe77Y82QnvkigERt9VZ55yFG/mGWA8apzjSKKMytyY3uD2UmUbU\nMKyQxRDMRjpAxYXKaXLbk9RcfNwAx0iRhFO3Br9z4a64UhMlV0nJOmo43W6K\nt7tujpINEgI7tubv/r8ZMvQA8k56qyCrxdPorEcrx0ekJxlB/ggFpr6axvT3\n3+7odC1u6M325QHKT6ViqrtrOQFukH/9yW1ENnl++UMizOvuvn4iiK3jH0yf\nS0YnYnKAbAEGck7cZUh+G/PGGFl/Jb/y5qm3EVyki4XdAfx7lGvfHtA/YpoC\nQc5wxBmmJo+4un0BMSuMUmxhOk8x9eWTwNyrSsdqkTVL65BJ0HJTtaKufYEf\nWPCJTK92cu6J74s479898DwvlC0roMYCmFtHUcLFNoMTs9TWdKspGhvneVdq\n8nQYIrB3LLaprccVhRXN7d0FUM9GcQNfO7zVnS60di8pFFiLT6SBOjLsrf7f\ni66VBl6b4ExEBEXYAPmAt9tY5D8rnv+UYzNBcJoK/gg3QBou6VmiuQrj0RDW\nqDGJ\r\n=Lya0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"8638cc8ee0b9a375eaca24a354e8f290f8f2263b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215121320","@chakra-ui/hooks":"0.0.0-pr-202215121320","@chakra-ui/utils":"0.0.0-pr-202215121320","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215121320"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215121320"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202215121320_1644063232660_0.7556445904444982","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215121353":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202215121353","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202215121353","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"abdc5ee0f911f40b17d69aea6bed71aa880ccc9f","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202215121353.tgz","fileCount":22,"integrity":"sha512-8n7VBvBzzaQbcpU3RUX6yGK7X3NCKhguSaX8x7DoB7bJS/oBX0wLzcuby5rE1hze1ofQE1mBmWwdTQVjRT1O6w==","signatures":[{"sig":"MEQCIA7HWXIIsijEIAiGw2vW1nmSbxT/i/P1S19gII4GctI0AiA/rOCuUW3ML8926PRQqWeYp+98bwgWGPLEMx2nHmZ+Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mogCRA9TVsSAnZWagAAAt4QAJVoC3X5oYdT75RZim92\nj+Q7RG1WVNqs0kozwRAIl0FjpPk9dJm+l+bS1VdiPcb399lPZgyMWIXz10DQ\nWzcf+hRmOwhfKqCuurJ50Pw2p58ZsBC5zZIKBE25nfocADTUM665vaRQYMWQ\nv8NAd+onBQgwFbTRcaARrv6En50+neHR7Va9xund5cbK5OoLwMK8OxCu6/zJ\nNfUohResoQhXF5YM7pmDxeHtcvMn7YoTMm0kHwbvHwX+kZgEjBxGnlO+Gnv/\nGamNf7o0kyjef2pm/IGBM9lXRDdnhN6MwfQyuzuMG/zyHJdTxmBBt+dbHHcD\nYNEETXk6+4UjoD+ns6ditIKkAGzVTiZLg9B2LoF6oAMT+uqoxPxoPFHRnjvD\nYH/WM4udhXh9qzBOgGjiMRBreeX8FmRwXqcrOJEMnQQnQOPslhlgWamd46ae\nlEJosZU6SSQlce/4HF6lUrglqFdEJDJgeclM0WytxDPOPzDuf5cnZMuTLtb3\nshHEPBCf/niV0Bhst0CMSJ0AZFFOn/0V7C0Ll6cRMS1PbcPjhRHlXsSOMhAF\nW0yxKPM4Cda26/zjGCYLHQso2o1DIahL16j5SqmADpnUlz21WMj9hBJ1iyOf\nN0Teb3XEhCa4xnAfjrqbB3bTkxzmYchQuYkyMMFuzESsTDSDp6RxaX/sc7+q\ntvQH\r\n=gTj5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"85aec4f7abbd7a289e7ad82c3dcfc465d84184ed","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202215121353","@chakra-ui/hooks":"0.0.0-dev-202215121353","@chakra-ui/utils":"0.0.0-dev-202215121353","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202215121353"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202215121353"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202215121353_1644063264343_0.8272296198249789","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215121428":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202215121428","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202215121428","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b643168766c1ff0408fb0176c0787e3909314650","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202215121428.tgz","fileCount":22,"integrity":"sha512-MsnlGyIwAJR4N7U5weOAYR4XTDGj1NcFcQS25n0C069jRksbhtguGtp74UnIj3mUg1p/FNd8pISNhfP2a4ymjQ==","signatures":[{"sig":"MEUCIFXjfQXepwNMbXNgcBzypSvkN0fzI5zbvI3LIUlvmuclAiEAgkNcX5aOM8dOXrrqowxxDvoiIOYxmVIC8X6TuL/Q0Bk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mpACRA9TVsSAnZWagAA18QP+wcZN65ucSHOUyt/jCaF\nwoWpqMAKhpS0Qp0+Dh9W5w2OyCz/KXZFfQ/cb9RtbsrqQPSV4IQV7Znokkt9\nu036o7P4osAdiTPOresmth3D1iYByGp5fZ+Gfmn/EULCZAxlRAnMiwEy9Q6c\nNBM8hK4PZE1LqoT0h19N3K+7xsbUU15bner17o3j545RUPaAZwvAZjOt2Lao\nKk8TEgJwMeubR+0S/OC4fDFbYTOJJrGfBtSfyBZEiZ+9RZqd4LtuvWxkwesb\nWY6ZQrY6ZR7HRDVK4kcVDaLDOXMi/JguRgGUv4R2v+8eyNhV8aqZqwnjBS+7\nOxYnmXd04Y6kchyiqSWARay7d6TO4yLNgNqxZLz059PVpX7Fp6/9fo/tQwLh\nM4ZqdYCAY0qOzIipDbNXRA+PXT8wB0XOD54unQfx74GeVJFvdBb3uXEJADxo\nS4oLk0OGLxUVKfZ1lwl7XtlDe7OqugX3VLuc4gZHgMDeTGQhzf7HCB1lrBOv\nxFQeCQKJNtZ/8CehEjjQtIMLf5J8yjKauQuSb4NXWs0HYgKOmZQpvfhtz6ic\n2FMSfhdgGE0fTm/2TQrLMA7jOkhH3daCw84HcxympSkZDBtyrhWL3rfd1CzG\niDFjTH5dUfuGGYfRJBf64x3LhKEWzd+sJ7cjxzkPfCDURZxDa3nxTyW9+SNu\ne46M\r\n=+y8r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"5df03dae0203f8d26ef7213b66e0fb26fb6a69ff","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202215121428","@chakra-ui/hooks":"0.0.0-dev-202215121428","@chakra-ui/utils":"0.0.0-dev-202215121428","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202215121428"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202215121428"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202215121428_1644063296289_0.06069237350084733","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221512173":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20221512173","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20221512173","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"aee54e2542f51f4e38b4f36424da64274855b5e0","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20221512173.tgz","fileCount":22,"integrity":"sha512-4S+2eTfMTn9es3oLRcBmP5AtD38/0aISjQ/Fr/QlTOWAYyybeLvSHWkfJtr3n2qfkOZAps70exzpKttAAr2w4Q==","signatures":[{"sig":"MEUCIQCL7gSKiHPAe4YqiGWzqgJm7GRr3Le9FaFQSnI5tJ+OJAIgaAvfcYueH+bMVgriKVrAq5bDNT9kb42pqcwHzs78Gxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mrfCRA9TVsSAnZWagAAW3gP/2+W6x7YauCrAVQtTn9H\nmygKyKHhyuX2HoDnm+ogHw8XISnQPT5ShmCOX6+EnSenjcq25c/DF5VQt3Lg\nhG0co2Mj5LLEXapeHbbyTqHKQTQ4ASAyDsVyjOYAGSZu6+wW1cmn6v4+KOGn\nc+nTgVeP4SUYoVoJ7i2P4S0mQfde9m0qoBKy28BrmtPuccf4ZcLrsLVd0Ar3\n4FC0jeLfLF2sQPfKrpsmHUdPpO0Br3ylp+btJ8u9wj51uXAJE4VqB1JgD2iT\noDep64VQnHrsB3K0ofHe+IaGPLvtYs2p08Xs5ltwpQq5LbD0cowyqg1rIJcn\n2G2gYZEFnm1CT3RLqA2PdcB8DhZbSiBlUnSAEPxOiiOz7gsCnggyWk2pWrhR\n87YUVGcetG/Fzt0yTZY08cJKJ45Zt4QZib98wADXlkLF8qzniL+xLMTKtr8W\nAlnlOpAGQ9Br8DHL2l2sIFL22boZCCCYwWkY/mKiB2QOz57dqUPtBNRi12ET\npDxvgReuJXY2dY9gQfD8QOsSS/Jq+QMgrb3HIOrm4SwbiRvbn3sYlsBXGOVJ\npZwmA0YaccMxlMY8ox+HzqiH5y0eEuafwqR1qxFQ+Xo+R/ua1XNkcAIGwVZ4\nAzpipXNgJc3WWTAma/Fu7NkZvExGl4sjCcLNtY3I1Qp7wpoAuiZZmv/A2hLZ\no4dk\r\n=TXye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"f6578a1b76546c9432d9bcf06acead17d68c62b1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221512173","@chakra-ui/hooks":"0.0.0-dev-20221512173","@chakra-ui/utils":"0.0.0-dev-20221512173","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20221512173"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20221512173"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20221512173_1644063455365_0.657865113734355","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215122415":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202215122415","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202215122415","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8ceee0087892dd10b1dd74b651f74defd701bd85","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202215122415.tgz","fileCount":22,"integrity":"sha512-m/JJhviUI9ieRs5YLZ8kZSpA9St9om1wLV/OM6KEoVzbYRhFKK00KU1w5LuUGCi54lpN2ezy8XI+Lcl9IpZkrg==","signatures":[{"sig":"MEUCIC7/EeJocLwgbKcPIuBFiLU1cVZShfwFU4vVQ/4EapG2AiEAjv2qclrJXbI3tpYM1Cakb4z+ieorUjQKGsQ/pyoHS4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/myWCRA9TVsSAnZWagAAgB4P/iK7Ql0Ufs5pR8ds8PXM\n8Rul5DvRbgoucIdeZKvu46HsJq2flG+ezy9t4lMZ+rb8kneCM8tvCQ30x/dr\n68F8a8ZbzMCcHnDZc6POpmdgzStxjIGBnd7m2exFhaHUcCgH9kJadW3WhZNu\nChSYuVdXIOQnW8n9qD3avh9XuuvaJclni1kX4frJOAttUrURKbVFIhj3F729\njb97GtiSFTUNpFOcR9vsZqB5ArScHgt1NeICbDgFvmNjQJX5YSECVGEX1cVu\nTbHDRA2asILsvz7XW513TwKQ1aL3dX71+WV0jCFxxYB25GtCArVg3DHhepLU\nKAJct5WAxzr3Gt+zih9bF3e3hjrr+fp2jRgc714ICi5yhstyDvYXqje9G2i3\nJVks6BuJjLhtwow41hnqdpBOvP3jwxDKMJXtE35jWRM+SHi23caVGpKN3cJw\nGKO6knj/HlLprHtSdSL9WrM1ZRfKWs8wpeHBILyRBEnNtKqq+6sOXRmUKxpU\nHnAXMpt+CiWHBgC1EntMJSL+Xfh63vH+AvVP/adLCiUFqlOq1Q3i2gW2iL4V\nRwOLyz2VkFT36RiSbxmyqf9T5x6049wdnhKrO0u9YXnszKEty30CjNWtb5Gf\nkwDkRpnIVd9nGeI3VKVulMjcmPlFr+/P7SJJBvx8dBEntPh7qFfvOw6nROei\nrKWl\r\n=D0M2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"01a939464a28d20ab27b38864dbc5a44078d7314","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202215122415","@chakra-ui/hooks":"0.0.0-dev-202215122415","@chakra-ui/utils":"0.0.0-dev-202215122415","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202215122415"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202215122415"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202215122415_1644063894318_0.8053242037807571","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221512359":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-20221512359","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-20221512359","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"99d604ade15d20a1bd08f65ca37c3ed19a9451bf","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-20221512359.tgz","fileCount":22,"integrity":"sha512-645q71PRenmtJe/G9zn2/uA1UH2vJhcQ+efdtqxwyQlyu/pg03BxdZ8jwSi61+oh0R7RqHrKeITwQaWiILMM0w==","signatures":[{"sig":"MEUCIARU/3+lyKy4y+FmYTYWWwnac39vVfPo6PI3exEc8MSrAiEA3dWhUckm07L+An916IchJdiWXpHd5UbgOzdbHWEv0tE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/m8fCRA9TVsSAnZWagAA+hUQAJEBuVXYPPZtmscf4oF4\nouFVIz8TAEEmHzzm9ThS5FHgm+mBQhruN8yEd1/Fi35gK6P0gVH/d7qYMbUy\nH6Lqma/ZlyogGEap8IgjSMfH9VwJyhPd3kBr2FqY4lsb0cY68sT19fJgCw6j\n6cxFK5CMLtyoxyVwff5eK1X660yJ5cmKL93Em//c5aO2Rr2UwZ6Ku8FrPuhc\nHlJFdpdZywXtVeOU5aayG6gP7aEx/FH7RDJ5wFRPDpqbNYh1E4+Wz8g7UxrF\nMXiGlV5Gxbs7lNFXZgVIxwraQSKwxrU5J8iyY+KfS4wvJ4t12dEHSp79BhpS\nd2kwD3JgNF8xo6hNFb+JY2UEeZfThiebUvfu2ASt05lL3PyXBaLaNlLppIwB\nj0/dqkGMszAaFZ7SG+PBo8FIjQ5jMZ38Xr9NgJA87LIiKklk1xxzsMwOSk6U\nLf4v39rkVg6PlriMeEbUYz7fSMzoxBygCIYFjRbs7LZGQDLvVL8hBbSXmcUO\nccoFOFxQkWsL9g/16E2nJzKYnFe5vCAr5opVtBx2WIce6j4z2PVsioH272dL\n98Tv05WROO3ibj+S1+2kMbvZ5OCJ7puVYIxsBoBvGZMHPhT5KvwydDXoXWCl\nw78gW5jYsyxdjR2vCYkBW4t9ZA0Lq0/9v5vLJvQJsEWxoS6/qHC1xRrX0nZU\nldxd\r\n=EsIo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"df779e921c2c95e0cdb5dedbd4283ce7f149b0ce","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221512359","@chakra-ui/hooks":"0.0.0-pr-20221512359","@chakra-ui/utils":"0.0.0-pr-20221512359","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221512359"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221512359"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-20221512359_1644064543105_0.7750720161084497","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215125733":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202215125733","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202215125733","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f583b07ec928a0f4deb98ac8e2dff246067c15ee","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202215125733.tgz","fileCount":22,"integrity":"sha512-GxsZpPAWLnhgnzOOualfjwtx+x1/sv+HzcK0gpT2ebPBCUnoH5jxCO3Z+cy9vTdPmRtF+flK+d3nrWk1qe91Hw==","signatures":[{"sig":"MEUCIEDvcOFTZ8/hoEOhhqrwzbfEIyYc+NiFwEp0pqnK1UIXAiEA9r5h6G8qb66S0E0x9Khw/Gb83On6Yh4d26Z4xrBlo7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/nRgCRA9TVsSAnZWagAAI+oP/1j8I/nrEQLShj1NZ7tH\nHrDhiC2rNZNd/SGOmh/KU2gX/HFDh9ipvKBNtpEkqRGMn4T+BVTaMl1zpbgx\ntEmN5LOyvCiqd9JWV4PIH8DpUf4G6yZ38+vdz8IWTFrTut1Z6YYzHlCoCZK8\nPzw4YjconmQkCwrcu61/C8Bw7B2Ye6YxjWe2NeF0kZpMv3ByIyVkYHrZbscl\nJyqdO4yC6oelTAZ0sXxlbiFplNP5Tjzdx0envTnaqYWTZPScTlg99hg6mgYd\nQc4caSb6Cu8E11DHJqzgfMMoJOUDheqgiqGyPNGJR0RSwmBdU/0WowfWP3Fe\n8nEUhoQdC4oe4VkyMVjBXO3fsv2pK+ALZ00XzFus3ORVnMtJFGxDMHw4aJ+0\n0n/5NbPShoN6T29ZRsS0+zNGN5e5Ae6B4HgdlgEsMGIHK6tgrufg3CJ8kMmG\nFOAtcqz24EqESi4NzsoB61rzDgsuGhF3xiZDvPjspz7vZSNw6cs2ljhzszlz\n3+D3wsjSGLm95SQmrFtHE+ti1sn88f8OLsxHwmsZf+tAyGu9VbrPcswGSAo0\n6dxFvnlItgPbyLulJaeyhzN1IlNtsvYNYBJ2MXk9REGmvickPYfrdfiDqluF\nYh+5pYe4CS5Gbb7pMJ/CRYXGYlbNgEq0h34EXQydF2fLxvJ0rw9faB1K5O7e\nwd4E\r\n=ErHR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"5ec7ab0c37978861b0a67e7f31aaa4157f05cc4d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215125733","@chakra-ui/hooks":"0.0.0-pr-202215125733","@chakra-ui/utils":"0.0.0-pr-202215125733","@chakra-ui/react-utils":"0.0.0-pr-202215125733"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215125733"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215125733"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202215125733_1644065887874_0.948861466191919","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215132532":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202215132532","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202215132532","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8ecbacf7bfd3cc5aab0146a4de1071465882e096","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202215132532.tgz","fileCount":22,"integrity":"sha512-2SuCPoHyvdxMDwN8XHmxB2ZmnNpixOy5Ce8/vBGO1RTMTwM4UGza9C2DPHvTnD4+mnoVs9cNrnQav8wnw/oz1g==","signatures":[{"sig":"MEUCIQDoOqh2h1o2JgRPGSvyvySIvwPJSppdvda9FSa0Og9+NwIgFoi8KAMFmvkH0Itk+J5VBY1o3p2JuIIlXjiEB8ih3x4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/nrvCRA9TVsSAnZWagAAikwP/15h4X3P0vdqFAhPjm/G\nljNM+hW4NVZ2A9zH4Mk28T6hlsa6jOW6is8dbPYtgutNdq/3EgM07qkKPfsq\nYNETibaNA8wVUH8f3hlxtR5TWkgo68ZI9D7707KQ6ONfBBMCchIF2OmWpeJA\njwHY9YiPiH+IAm977wrd0V8ldxMajDH/IasLqvUZLhAcxtz8rkUGsYT9NxrR\nnZg2xaJR7daQQKv6+wCY2GIYWGAAayF4EVrcsy8eZ8Zp7rPPQc6srQiW3txc\nER1Y8c90c0xS7F6gWSD5vmNDQv1mQSG04+A+HJlwnpzX+OMrOG8PcebihXnI\n7xtEpoFh7ES+63oyeLPpZdAh6Q/DYKxu+64P9deMqQp7oPdSjBIiVB+4zmTi\nK4KoRoCFlb8LoY8ggKfWW6r/cNHx8RFyHYA6rWg584voEy1hSpB7t1SaT/bh\naY2Cvr3p/caCYOv2u0/9zQyzcWGNSgEqiOjCJOk7AKAT1oa9Qo0+ZMBLDSz9\nubZJX9Wcn9Df/obkD6tgxFLN3bmUQP5vZtTXBZSTkIKA2bSnOJiXodtneJ+u\nPyg2KZbvCpwRX0pUIJNVaeCh7Knvyc6mKBEJiErj3/C4WyJnRxdW+tn7sryA\nPm6MrgtNTS1aNn1Qk3RiOMw739qoe47YU5XGuzZCuZe0/eOqVyQAzmvbuWkI\n3xOj\r\n=W7fl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"a503acabefcaea86cb7f40a6305830f09d2d6083","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215132532","@chakra-ui/hooks":"0.0.0-pr-202215132532","@chakra-ui/utils":"0.0.0-pr-202215132532","@chakra-ui/react-utils":"0.0.0-pr-202215132532"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215132532"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215132532"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202215132532_1644067567036_0.4764411943092517","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221513279":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20221513279","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20221513279","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ce47e71e5cb297ad3064421e88cf2aa243d371ca","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20221513279.tgz","fileCount":22,"integrity":"sha512-LJhRfeeNxVKr1YIo3APFqaEih9jKMiJC6RkOzB0LT7p9bnwRLtWRuMFqg5eS4UcA1FS5DnP/alm7ie8gGfcm3Q==","signatures":[{"sig":"MEUCIH5UNnhrW441SDJUQ0Jnzhrqpvp3OHcOGcnht7/vaHKcAiEA24IiowQmO0vfM74Sh7+JemqfoZx2ysiLGKsx+qsT1Zg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/ntVCRA9TVsSAnZWagAA86IP/1zcYZF1DjSlqbjKkMzK\n6QAm89kvda4aeGeKopz2MhgvQyz7aOhSpuD8Wfo1z+f0bhjV0bHXfGUOG2kw\neh/IkR9oQRKBYFiEuKEspRebnfI4KkemHYpR+p9pWZ2WPlyQFtYNOsRRtbFi\n0GyB23D00GRUjqEwPviKSGygQZcJuYJyf4AFbNHLHDAVQOp9ZiBKvV0fhRwG\n1MyjT1dMRwWXFj5qvMlpL3/qpGm/Bz9zdOzi0E5Ik4DrMBVNGZO4RAsvXr9k\nRYno/B7LRWuCt3f6x3b3GMOJQ7di6Vs4ezdlXqNkyLe1frAzgXl4paQ4++wg\nLgpzE7pI0jqUCpd1at/5xA0b1XgniV0OpqZ1CTpKTdC0SYQhAmmpH/o1RbBI\noJO1BlI/Y5t/T7FeVLtSRTXtxt3xiGCEEFrjPB7RmJfxub97Oiaw/0TiOF65\n1c7pfSD+59C9gh/m59Hp5VFZByIWSZPx8bBAuZ3HpGzp1XaOqlDxnC66oBt/\njGYqcLcpQnwwPLsDMBFVSibohnVFwpsWftAULaXLjSDm0O57QM+gudo4kQDg\n4sbM3lmuvAMyXSnOV9wD4SZMzQ7cOKwNn8duuXcNIDcXeZ5a34AVE1t1f77Y\nA2r4iIKHlAWU/Fvg+YR2q9Rm6c7S/MUOORYZ4dPoWmG6HxukB6z90+Tgb08X\nK81Z\r\n=tJqY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"a503acabefcaea86cb7f40a6305830f09d2d6083","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221513279","@chakra-ui/hooks":"0.0.0-dev-20221513279","@chakra-ui/utils":"0.0.0-dev-20221513279","@chakra-ui/react-utils":"0.0.0-dev-20221513279"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20221513279"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20221513279"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20221513279_1644067669497_0.47510580602665575","host":"s3://npm-registry-packages"}},"1.5.6":{"name":"@chakra-ui/form-control","version":"1.5.6","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.5.6","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ffa6ccf0f4609a8c29964b1c136695035e7cf22a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.6.tgz","fileCount":22,"integrity":"sha512-+JPFkpK4EK/qBVCkyyiJYbDVVEGfzLzLewyn9vbnNmyM3HRqs9g2Lul5cau6tf1QmAwDD7Xy0yQceQ/1RPAgoA==","signatures":[{"sig":"MEQCIFDujMVSq3ECPtPNdunbTpUvLdvpM5S0EY/6ibxMKNUUAiAsJqh2nzv3ZoNbHiC9aupr6xWw1tYmWvCOF6s5ul+U8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/n1VCRA9TVsSAnZWagAA3gQP/A6WbQKaPOvCjOzxXpMz\nv+WsbKOgUqoBZfnPmojQkgUirA6sV+LoUuToZV98gqBpuIilB8WzGhP4/MU/\n1OYY9p76thzsr27jM4uf4zemfoeDvPqkw+wtP27MP2PWuNKDw5PxuUD8kaHE\n3xVP8XuuwXEJSskjowGt8PTBFaikXMCOJEZ52p8DROIfAqAW5vqcqmKYrUOj\nIeeb6IpVrhUzczGxP/lN/KjVyfUq+TkF9t92PvpNdM7dvPync5JxtYd09u7U\nnYtRTBltc5HBgS4IveWmyOovRmCu9ejyWebKK13tCTNICbTJWtdkG4Qmc5+j\n1xGuzlG0Lc/CgNhgXWDMagbi8uXH5DfEGwrLigX8T/xyUTQZutJxqlQchoRp\nUZP58E2y+puh8MjU/ZqydtQnznTg9TKTB0yzEaHCeWd9Pa75+8vV51VsDvcb\npJ0uo61Bx+/RXtzIAjIry8Me+IbalnyPUEk9KwAqhCJPa77mZ2Gxl9ERNi3Q\nHRJOV8USkW9FNlLd5zsjGKTfGodN1T3V+ofk8EUwg52Hirk7ssAx+LkbOivC\nuDrhVWuJBo84Zs3qvcj9QTIp6bU3OxjlMiug6V76YyeMOMD3WO+U+Re5Gflz\nIN1Z78zjVNSy8T9M4YFkeA3ooR3r/mI7pZmdyQHmVDUhNM36cWh8R4HbSBet\npBm2\r\n=8aET\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","gitHead":"5a6537a05fd2d5600b7ec51cce47e0a46d1cd069","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"2.0.3","@chakra-ui/hooks":"1.8.2","@chakra-ui/utils":"1.10.2","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.5.6_1644068181244_0.29379913837218496","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022114224724":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022114224724","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022114224724","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4f2b37c594ee6538f9b94cf42d0a1dc411740b2d","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022114224724.tgz","fileCount":22,"integrity":"sha512-9TvppcwRNtqUXXMo7fN37FHXeacpGjwtXfZdQySpDhqlT8Oqnp2DrXxse0bEE0ZT5zMYu35tsPy/NtxVuNCMtQ==","signatures":[{"sig":"MEUCIBSxAYNAaaYX/wX7k/5vaFDjrmXmpQgkNSx+iH2b/9vjAiEA/ZE+WNOCc1Y0p6p9NwB58yVnCy4zjg0R26K+cPemXzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCtwnCRA9TVsSAnZWagAA9+wQAITD9mIPFqw4nhgjN4cz\n9KmFxA33VWqKHVEcBe9EAu7xCpxAGpzZM/uJPf9cafGKqcw7KkZdxqcE4WVv\nY5bOx6K7jAnJYp1Ry0Y7j5lG6yTmeTF8yKwzLkCSP4S+EK8Cd3gijho5e8bN\nXKNhPpaVx1C5Dr5EcBKQoLrj+o8yUXmfrECa1dXu5iHmdfysg28VFNXnqAIe\nrYdwX4SGiGE3xfQfJFmtlvuFsJT4VSsSozaFLs7y02Ig9jtTkIUW3w7LleCA\nim+mnMOhm/ZLwroYbT1U9+eC6McI0/4r5joslBkwEYmexzmw693t09yleiFp\nEk/IzI7AmZ+P7GuR8S6Cz6M+jzJBuyB33YBoGSHG12yK2wSLZoB9ZGK9PG+j\n5p/Lr4TK0vw+Psjooi5CQTOjmpLi+6BmdWahFqf7HCLt+uCB7M5LryJsy2wJ\nhiOgg3DwcTUnorFMSfLpYOke9NW9/dkLVIKuJvjmQOeUq//xhAnppiKBmCtK\nNkQ7gVBR71ZrAeG/uZq56abJRqe4vNaYSmiyTxjOC9JiK9GKwewq3eodZTOv\noIo6fnLvXFFMApzNtSso4XGl8nasDsEMemkmcipVVnTN37ylGYuwP0qBvqHl\n2ger2KTrlD/mc9rah868KQ0bj5yA7Im1nzdET7Tp+FoZ98r0j8Qh+euwKlCw\njiVO\r\n=rxBA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"66e3fc3a07c77e7c46e5caab030e238f1771224f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022114224724","@chakra-ui/hooks":"0.0.0-pr-2022114224724","@chakra-ui/utils":"0.0.0-pr-2022114224724","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022114224724"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022114224724"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022114224724_1644878886950_0.4283384991276904","host":"s3://npm-registry-packages"}},"0.0.0-pr-202211594731":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202211594731","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202211594731","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cf4cac1e1a30bf50e18c8367d6724c3f035162cd","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202211594731.tgz","fileCount":22,"integrity":"sha512-sgKKbs+WMZdc2kSICH7F6tmTZniL+lWE0FQ+GV/C1u/nv5R4IrgvostA7z6Dbjlo3pmo/VpGnciU8nE8EkkXYw==","signatures":[{"sig":"MEQCIEZFS07BNIft73PyFDcOCP5AQakobHNX+9r9C88lbZ1PAiBq7rXqKCzE5dnWcgfmEgDk+7Zr5PuG+foZwFrrhAR3GA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC3bRCRA9TVsSAnZWagAAvYgP/jkgdjSWVb0Nss8g8gG2\nRuVulbVDJ6+b35SdJkXYXiTndjnmOUV+Dexz7xWETKHBm/SePx30hSpGVai9\noH783wAro4tSuitBDPxM4aSBEb++1q8ttMWwqBoU+vQW5XD4Y2F0hwaDOXA5\ncg9uKP6S1MOv5oqpTlO5SGu+8EzRjB9hSykRF/8THV+a4jI871peO+gqAhtu\nbEo9c2AhoiKjO+3Blt6nWWSVi6pdx6Fj5IBVyxd5MTdPBRYWpg4C7Dbrv74p\nF+a+SALDB7XNnrraxWojczDN1kCTKFGTF2TAk3M+Pv6X2e0clvwGyHkB1EkA\nR57PGnO4oVcRzTgtuiPExCMBiMAHi66aJeOPoZQIqamu47oJv9mSr3tb6SAx\nwHZhF56XN4llwRfIq1QKF4I/Fs8lk3dXEPoCrURsAUIYcmwj7+iWyECQILcU\nSg5GTFMUJ7Hf+SsNx65xJfqiwNCa7bHH6x97RHofMUofd6NC+igjFNBSSmXr\nhFIBioOQlKu6d5lzYdV0WnApbtkyX9fnA07BXLarmRn6/EpmRlyZHpQ9h2SU\nbLCtBuEwtPxoMfuAkx6kgxvS/nB3yK30hR6qpFr/ASpLTRiGmw64ze4sMUnM\nyIbWb2Jnw0UQI5K9R9GBJk2EEBSEJLb9NNrFxXAY7dbDUbzkZgtLdwRGLh38\n6ORJ\r\n=oJWX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"66e3fc3a07c77e7c46e5caab030e238f1771224f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.1.2","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202211594731","@chakra-ui/hooks":"0.0.0-pr-202211594731","@chakra-ui/utils":"0.0.0-pr-202211594731","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202211594731"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202211594731"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202211594731_1644918481814_0.16433351668410956","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117101328":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022117101328","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022117101328","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d609221b7da2763ef0126c672866ce19633f838d","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022117101328.tgz","fileCount":22,"integrity":"sha512-+lSGiH29JNHnZap7ejJ6DEYjXu5yrmmGMuegLkGPQNTJGbrmFcUnS7s8zDNQw89JYmIZSZJXOaDId6HDjhBlrg==","signatures":[{"sig":"MEUCIDfj8k5vIINldHEtbUublmoZD93X9N8GKJjs1q9sUiHiAiEArAf260wTHew+j9ixubo64gHiYdCTJoWXUZZI0BCqAQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDh/lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIbxAAncxa9x7aqUiBQl53y6wVcucVmoxMp4w6IjbmSz/rdxGheDFK\r\ncYIDQAsaSXrvWI/c/LCs91zS6QSp+eaOIRdCaFREKzJwsYpME8Al9toGj4wI\r\nur9+0BzKk7fpicmoyWF0AzLSGR6V2z8q+a4HWCjoPzHjNJsLP66w5lZFG3Es\r\nvFYfSxjffmZLDzgtSim2lSWp3pHbefaOprlDywx/krSVRb9TKy+cdg1HRmK0\r\nv3IRAADnTdRSAhQBGvu1AdUv+uXlqc8Y9olJoDmoFNU2P9x9y5nGn8Iy9q8p\r\nDzVDGLgqmraU1aSMPphSke3bMhf1e/XaXGPyBpH5jbUr0eginuQCdHDh9LIX\r\nfST6bJhSkqExvceNWrKYhjJCV7EKGBhDj+OI7m9GzTw9VtJXWNcqrf9h5T2q\r\nUsw2WZtHPwYVkTF9SApq7KxNtB6e9IX5frZl9u1tSZNviEa3XZOYehYCljlz\r\nDVB6Up1qF+YCwtT0Pe6JHMyZEiElYx5/Ir7+JMLEbqBG7xwdrTQjC+lP+Y30\r\nWIMPKlJn+JJmZFynMuQ+n1mUNlfoB1GUNIOLNRXwipziiNGO5Stj4z7QEdQo\r\nbDhwya+p7uCVgN6iqJrwDkA1sLo38J0CoQCIho+I2Og4hf6aXYFFajcaJBLZ\r\nCR29qkOrc0pUuQY6Mwqf8q7Q+wCvcNra8xg=\r\n=Go9i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"c2bcba11ca60c175b35dff10a922e600c3fd065c","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022117101328","@chakra-ui/hooks":"1.8.2","@chakra-ui/utils":"1.10.2","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022117101328_1645092837030_0.38767963511476133","host":"s3://npm-registry-packages"}},"1.5.7":{"name":"@chakra-ui/form-control","version":"1.5.7","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.5.7","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ce658ff1584c60428cd3cd6913c9e35b760b2375","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.7.tgz","fileCount":22,"integrity":"sha512-QcskYPJnac1amUeV3HgHtlSW5zCshO4LE+w78QZVS/w9o6CJRLeZuf6jl0W73EtKJ03/RpvwN5IUmcq3JQzzxw==","signatures":[{"sig":"MEUCIAvx+5TrdTXYOKx0WQ6639TzOBZ8jk4oNEe6ErUsEP52AiEA647aP5jIsJsCwgfjcpFRZKY0utQBA4HlAZ+XP4e4ylo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDiEBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpG3hAAh47h7vgDPr4UCca5URAxP22mLGe9eyDzb3KTYYdQhj1mq/xK\r\ncnYbg0NWtuZ9xJx7L4+mOjaTfxUmpzntYwsmlvqvPxXFX+vNpJQhhq4tkozQ\r\nOtKsTb0xS2eq9PeRPUPiSASD2Zr+AKa5BDiqbbiuWmTRr4TFNb8AYW6wYRDT\r\nOquZxrp7/k+yz9BWz3nsOfqcSqC+p9mSI9ZswBOr+XABmXKuXi/H0esZw8mw\r\nMjIV6nxlU84soqKxKX8/VHW583TlkND5tVIjxc2IqT55hTnsANCWOZ0BVik8\r\n+j/nPTlUSQSzSevWOcGgtA1erQEXtbt+DG10zxrckjFTIXcUPHPvHazqoPhF\r\nXR5R7UwsOb4jM8DuipWxg8qbX9gUWjYxI6BfW4FR3MwBFcdyyxKhPHFIXCHX\r\nv9WJEQn8H3DEg1hbMav4DIgAX+B3FCWu5HoBUFyTSvQzlk1ltkCtA51meeTo\r\npykgiPqw6SqVMs7LKp7Gue1S+uS6qz5RIA+PldnRsR7iY5Hvm1dV5IZyNkFY\r\n2LHuNF232pIAlruIjoZH+8HUK+y9u4cmLDslqBdEe4u2VIf+ZwQ6iGpX/UwU\r\nHK67LeKq2DUGXPyAl9h1xFMw+8kfNq8QkOb9j4FkadqPoV1ilbSe7J+sZqi3\r\nUSfa8XgVFD9UnPJyD+Ri6CSQ8iucubjd0yM=\r\n=l6zS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"05a2fa22ee6bc23c5eddada9c3ac79cfd637686e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"2.0.4","@chakra-ui/hooks":"1.8.2","@chakra-ui/utils":"1.10.2","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.5.7_1645093121110_0.2327279237441482","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022117102151":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-2022117102151","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-2022117102151","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5cbb41224e8e49f7744a8c891184b40236a24459","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-2022117102151.tgz","fileCount":22,"integrity":"sha512-m5X8LLPorCPLuCsQwwrxHYAZBpdANnA4dpU6Vhl2Fnzhezezez1m1cZuGMVENeoEjk4dyI98rXcYogVyfxXTIQ==","signatures":[{"sig":"MEUCIQDl/61ZGHhn/0zVMg61Df7r0vIQ9u0/zT3hoPsnERUTAAIgEgCtPoRhtJikI8y8dB4HAg/wcwraKJkntDPxP4Wj4sU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDiHWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsKw/+MLcUKDWAdYQr6o3tYzUJgP5b2dIbCv4RnYhEBw2ItElcCgLv\r\n4hLdxxqBeTB+5L0e8ko97DY3bBvZ4DaaTFbqVK3bYMY0WF5YQQ7+uHdmZvb0\r\nWQ+IQBZHhBBBSeUOzydDimYMZLsUPqwYKIErQ5v9FmVgqwr49ZDMpXDLQyaE\r\nsPS8H9Dky1NdnlUNAWww5gC8cqKPbeqxEPDOkSnr9Feb9Q/uoMbfXHK6XFUW\r\nindNKu8HIejkyye/dg7J2De2tq0W6veO+rBwCYK+LSxr3iCp5gcCwwu0y4QB\r\nccVYR2CXRL+UV1Dv1jQhx/1jo41X/xuYZ/3pzkRFx/I82su1cTwHFYppqP83\r\nEOnyyNlJRcQhQW8GrJu3lZgatLGO6FwXIcpMcvgbefUDbqrMDlrUrl9Wf8J0\r\nVgQSrfLtc/w/Xmadl4/sOxeT7ywOqkBWmCK73KEq4ln9YwDmceE6NTwMQOkT\r\nbOKFq7yEzsIiKrx4lSXHyScrpdTZSA3b+BmF2ShcQtYh+MaD04wwM0Niamjo\r\nC3csqjMoQDAT8TYUluNCAv6nUgYcLvfx4W7AWX5MunfnYWQokW/aVM1550I4\r\n9SBo+eGJT99iV8yXyKkQEKBI6mSsmOaA2flFdqW3TG86/p3HumF6TVCOk9GH\r\n58z6om/7wp5VewZwunXPVcaBaxKK/PJ8yQs=\r\n=PGCS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b0ff06849bc9bffe2a0a105c2c7f5f6d16718f3a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022117102151","@chakra-ui/hooks":"1.8.2","@chakra-ui/utils":"1.10.2","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-2022117102151_1645093334085_0.012713312122203613","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117102223":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022117102223","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022117102223","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"092463efffd3b42b80b366854caf575e6e950da3","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022117102223.tgz","fileCount":22,"integrity":"sha512-+/Py7ywKOtUadbq9D6vpRIjoQr3iKsyBjAB3GuXIR6NFsxpqQF/IRsAI5S0W2W/PXpbB5EaZ2d9Z9eNeuJe5+w==","signatures":[{"sig":"MEYCIQCyU79IUgo5sTWvYZOweTcCTM2nCOk0uXAwbZxi0AejEwIhAJKPpF7erOBmN3JkNl0kKZUemwaAVwvSdIaOf+HkY2GR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDiH7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqWA/7BIWLncLrfH3mh6Kkele4fzGQo/paVaGaijBESN8yrNVsreUw\r\nn9RiuKKb5r5XKGGJl9bbKrcTg/obM3vh47E1bNzQ5ufBO80B/79KAzVRHX/2\r\noHxB1VPwl7wlN91B3eEi2EBgFjjD8rIXk2bDSfv3UOKJeotR6hz/lqXNgG3K\r\niza0TRB8SVdk+VggV5CcQsttxyA11vxcO1ELa9Us/ZkSJfnWvflB6g5i9Lty\r\n4+rqVGCJZesVvrQw8ETgl0aiTWgFVRMMC3drLU+jL20xHHVncy+AAnxjVBqD\r\naCN+hBtXNIo3tPlaScZrfsaIXDYDNAgP++wa2qFcytULBNmJ758sUVkNZaFI\r\nYmynJBHk8eudaVs0udc0HVdIxm9Kx2qWu50RLUSQ1bFGzBMxRIG0NjuA3e7a\r\nn7CAcGNmiNY8FqmJNdmuHL76jKCIfKS8zplxbMH8r2BkQnNkY85T7cNFt4l0\r\n3BwuyibyCBfuelFCoItqPTSgf0AzdhYYJlIEnZ6RoheAfY824+ht7esyQWL3\r\nlY0qEc9Nz6STPygVlguOX0iaIlrY8HLZNdca06MnbGYhnA/fXZ4HK51TwHuC\r\n+6/zkxsbZpZdR4oIRGr6uFVEDI+3f/37MVRP7v/4qD5dSkfVNaebnogoxWVh\r\nB4320vmTMXZboDXRBv1tM5s/KP6bsfVTHjk=\r\n=IO2J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"5d4abe4b68bd454389224ac1001084a9929f568b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022117102223","@chakra-ui/hooks":"1.8.2","@chakra-ui/utils":"1.10.2","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022117102223_1645093371857_0.9837068155900794","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117103018":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022117103018","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022117103018","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"46c5ceda930f403a686e469f9b207da9ba0d703b","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022117103018.tgz","fileCount":22,"integrity":"sha512-ws1oure4Ovpbdu4wNH/vX5jpgsrZQZo0ErG+CJhoQ85sgLVHnXFpEopAXWkTgYaLREdougrvIAWNtyMichEdVQ==","signatures":[{"sig":"MEQCIEe0knWJwRSusvcdjFBJ7j9NOjgCOeW8ZvTCLF70Ek98AiA/BrDvWzpcEnmJC3MDyVim3UCyS9TKksW8iie/MAqshA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDiPYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQ0Q//QRRMjfsUFaYvCQrRr6y3eOAkd5AecMTkyEXpwGBmz29hMkfK\r\nRvR0vzufUU0uOtfSyeSCw5R0K6/yDaEr0Drmx7FXsYw95Zvzxs+osTVpFEBG\r\ncZIT95gA6iMG7lU2ps7dK8vYLtyCogLGWU5Rfpkk58CUs7DEn2+yfQfHnXnp\r\no+ys1sqHGmG0TozBDh72crXhTrVNjUGp2GbGDZXqE2Y1uMdED2e4n1ZbdjUQ\r\ntdBen8VCMiNLYvdPI/YRfpQe1xO/Guftln2ERSWV5h+Zttn1wfwc6QTw1uUA\r\n8dcxnxDS1LIOnfnFgYcBSYwqFKQKeSshW8+ca42w24EBZy4MesNG9ehX+M29\r\nnO9vJDvXEDT2BUophwbI9uOlxfDUjIsGOuPffgCbR2kopQAbT4/bZR3K9R+u\r\ndTiD9g4pgwFqvoAN6vfLkbrlul+7rcXRfaVsLVdD9UXTKapXR4OQYCLNofXt\r\naez3XBRoJnUMCfoAwvQL5iOv0zX8pQd991foLw3pImXHl6RAL718NZ1kF3ul\r\nt5Co2mQOgmVOjmuI9w13lJexj+wd3JEfAGoILpFrkNclnNJtz/gZQ1ZB3Ty7\r\nitqGmda01gTsNe7k910qeWr3oNxybLJVbkuE808P1yt8k4WzTZsfzrrBneWd\r\n5txydYQ8bFB3BuRbz/8K3Xdx0kK/uGjTZyw=\r\n=/2X+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"44c9fab5b0e34484c9afb858a553d4a2aa30209d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022117103018","@chakra-ui/hooks":"1.8.2","@chakra-ui/utils":"1.10.2","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022117103018_1645093848345_0.8839311953373326","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117131714":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022117131714","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022117131714","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4a4b5e4a943c45e882acdc2af272ce52d6eda7d4","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022117131714.tgz","fileCount":22,"integrity":"sha512-eQYrqs8DG+S2Yy+kmYr8swcmGgXg21N1n7XfAvMt2vyfnXqyHbXdd1N/LbKSLj/Sx3to3xN2rHKKjQUSVYDcOQ==","signatures":[{"sig":"MEUCIBeTpLeJw7zC7A+vnhrL1rTS98jk79UZHWoF7V+eTxVgAiEAoID+3hZNksWLlPmSSa0Zk2lKSAcRJIlDoF9qQY+yWNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDkr3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBgw//fm6iwSEt1JpVx1+i2OExeaai8nAsmZmLeMorLfVd1xnvM2Lh\r\nVW0OgdZjtSSbLBzsGt7yyMoV6JwSNMZoTiIMdYJOGhMrcawAPzgEQ0raQwvd\r\nlZG2MLtLqxjtZqGqAygDubB90jhHDP1ZTOLgNM4E0j5q9YMeJzfydFLN8xzk\r\nMFpah+XtZm3vTqpoLCC+owWhkz18AldXMMiQshqH2JruKSD6vt/rQ2b0wXgp\r\n5AAh3qpzZhi8BuBLi4exoMVRhZ3ug+EzGSVyUqoBsltopgR8f1jEyZqGJRUB\r\n/gt9DBvqw/EDF7K1E1UbBMG9DVG1Im6A5xZFVL7CCg0e+7R0FyE1KyA42UTN\r\n6I0RvLlJNehm0nmIzMp6pliEOXyqe+HCZSVf831YSn73vNuFb/n4hXMmh8mZ\r\n7JJSlZffH7UHR+hrOZeLd/gK4olWJ2E5qjIJ2+3T0o8Uh8i3LjkXEbYxPYuS\r\nz/9w8eCipsEF/zSG45SQxmvo45s5ZRTNmqyUNsgboCiltpTegJDzAEababG9\r\nAUwBQMNQvkXeCc+H9dSmragbCG7llFjZDRArEGFKNKKt10vxWyrHJ2c4BLJC\r\n8IdIHGbk8dKVf/UhtkTUJtjcyE99fzAwND3OIzZ78BcQ3PXf7rxSfVS+Wh8D\r\nyJ82AOjtiF/+lTn3nAGULEaw4WLWMwpB3BY=\r\n=mY9L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"a870e6b94367b7c6448d5c5c5aa8577e33e15e3a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022117131714","@chakra-ui/hooks":"0.0.0-dev-2022117131714","@chakra-ui/utils":"0.0.0-dev-2022117131714","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022117131714"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022117131714"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022117131714_1645103863144_0.591819780940873","host":"s3://npm-registry-packages"}},"0.0.0-pr-202211713187":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202211713187","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202211713187","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e78bb0449df1457ef0dc30f66c9c6da1d10df561","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202211713187.tgz","fileCount":22,"integrity":"sha512-ERnksAq38KOvoa1DuzkPpW6DP+4EU41HMEmXC58vjgGrCZ980yM4tla3F3O1uYInaGOz79YFfh7gwlYGMOSxxQ==","signatures":[{"sig":"MEUCIDCDN3mNXlb/kRF02nef+t259bJn4od1JnpRMlzP5hR2AiEAsiDtetePemFroFkY5vTuldybrJpzQMCPcILA6TQ4oxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDksyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0Vw/5AJl8k+SZo7dROOMeB1XCo+Q800GcbJt/HdHVFXv0xmwfTpZ6\r\ngzGl/K70DeWJMfmqpBFBdw8SeN1lEAkIq0tTlPk8HwvDz5aQ2VVIFYAkd308\r\nI/B6ag5j7nhK2Ns3FT3WsQptWEa8xUxztxs3B92mfc4oifd2OTrByOPB2yvW\r\n2yCZVOtQ9/xWg93P+wAVvwNa7UzwZ1UNi2p3tf2Y+GiFhGz115o8oc2F8Nr1\r\nZ2IEV2OzbhMmBILiS4JY1Lky9irojlYUhOucMTPhfw4gIVQ+IBnEEPPwCpjR\r\nmNKkigcpdiycxW7MILUgWPsk+KRyClLs7/eKYNEyxq/K3F89U66gi1a/+8EI\r\nIaYG0dLoYGkFWZ4st6OfZvozNAaTm+wtmt1PpB3cGN7Nm+ESBFIF9rWmBqbn\r\nb05k9+YcIXyWsVebOl3miRl6+/DHzk7CNGfe88IYLh+iTqa40Qz9h3EKxIIe\r\naFXzDp+6V2HH+hG8ICvThetOL795eGaus8PSiexoeoqU0LpcYvNSiGLykX/K\r\nBqWP/KTLhj/9bftbSQRewtDg+aHma0aopeihY8EsftdTO23qVx9OUDuOvqpw\r\noKyQCNXs+NHdWbxktvbJNI7+E1jN5dEtm7F72GQaU1EP9doTr4pa3GIMevS+\r\n4pHLXPgjGyMtYMXE5q+XC+ZemobCufgHPjk=\r\n=1iaq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"a870e6b94367b7c6448d5c5c5aa8577e33e15e3a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202211713187","@chakra-ui/hooks":"0.0.0-pr-202211713187","@chakra-ui/utils":"0.0.0-pr-202211713187","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202211713187"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202211713187"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202211713187_1645103922760_0.8214970593504416","host":"s3://npm-registry-packages"}},"0.0.0-dev-202211720414":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202211720414","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202211720414","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4eb3e15f26b5b5bb260438f4a2f13b87e591bb17","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202211720414.tgz","fileCount":22,"integrity":"sha512-ivSAQjtS/KqukZeYJN54D1asuRqzhEn1w4AlzF9ogC5x+/94Tj9HBzxI8a2AnuNEukURlKod3sD1vZ3zXo7vSw==","signatures":[{"sig":"MEUCIHOKEpl10xE+y2a6Kgkso8V06Gu3OI+oEf1rJz02ARtYAiEAyvlFEHmVn6rHDL0skdZ7Glp7uSKBq3PWeoddEPuVovE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDqpcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBiRAAgVoblaTTup/+3UF5C1HSLZYDgnaQpMNJ+Wi0qoHHuuMs1bS4\r\nU6blHjbJKsutDxDixNm7xclgSvEjymHTpVSixmD6oeSeg+z6xkx0jxvC+eiz\r\n6VlCD4js7t8IfLZJ7o2S/pR0SV7e6+sLrV5lFLQH543ujFYe+2uEKzE4z/+y\r\nl1Wg9HauTvdy81QzeU73MCRC2Njhb1/OzEDX+kx+W+iZbT0bWMOGS8fW+K1M\r\njFkCKteUIPiKDyUjqa0RVyf1M/naOrpr5HaGWTjm7M52t/RVS8E971MgWJA5\r\nUTKTHwQKX5OgzhYu0eIyC8RtSBB2GWoPH3Sa9rffPAdGSXQAHhvxfQn/K4p4\r\ngN6tp7XZGCkMDwGFAqur54USWL1uH6XP5i3yO+KhW+Sl4QxZZvNPo/aqIA1W\r\nxsnFwll4G1E4NCp3ghJbPHtFS/3gT8Xz3ixvgrcCysDXZih9H2GbnUBkJz3H\r\n6hCmUPU9SydjQDM+lyPV/QqGe2gj6uuyID1fo5hecHRYa9c7oLkYJ8YCFKpb\r\nzyg5DVAZdbF8MAhWb2XsdZlKQZoOZ1pFwQXG3Yj52KonFzxQPq/8LIhE/ekZ\r\nROLt8QGARZQTPhvtedsqP2abujyT/JeiGYRuxdrYmm6BTLzkLUPZyuS1bZbB\r\njRLkPrdLSaIthne5mOZdKL3pzSCD/NxgIic=\r\n=6dlZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"20b7a19ac5608ea52e63c0ecc7e680591d7f4366","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202211720414","@chakra-ui/hooks":"0.0.0-dev-202211720414","@chakra-ui/utils":"0.0.0-dev-202211720414","@chakra-ui/react-utils":"0.0.0-dev-202211720414"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202211720414"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202211720414"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202211720414_1645128284634_0.8484635411902093","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117201925":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022117201925","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022117201925","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"eec9cb2209b02d6253acfbc45384d1cba1a1eca1","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022117201925.tgz","fileCount":22,"integrity":"sha512-BzdKbgbi0LKqp+grh8lMfMGMsK9cAlHN3yjl54Dn8q2R0bsXvJdweqK9q1RSOu2L+Nni4osk3tdGiO3YI6XREA==","signatures":[{"sig":"MEUCIQD1KWiqCQYP0YIWb+Su53kNlKDWCTCGx9vNjaH/WKoOqwIgfewsdrXBZUCD0yZ8mqW/tPTftiEHpM4aPTd+tsVmnTg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDq3uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpw1g/+NiwH7KLx6vZRXdnWJNss55NQPtP4nCbQvKzphDZ0ZNafJXrY\r\nLIfvD0oh2TaQOHXMGTQaBi+xpTYPismfonHlhBYlZ65Y3ol5EgeNHzELZgyh\r\nVpg29fSA6w79MoZugby20OST9vD+QYJsjZzykQWJ+1L7ADl2JJ9p1ZCcOdzt\r\nBYDehIZZ5ZZEQfbaxsGBlns6Ke6OYSwH/o59fk0EVZpefuZxEcBDbJey+L+Z\r\nk7t2ioz7bltnmHRma25BxWn/fK1hJg1c9+GvpEyKa4RUZndLBaEmogo9IZZ0\r\ng251/PJG7vPjjli9krD/IiLt8BCnlQxjlSq+6JuG5RM5q1LMxICvxzQj1cBz\r\n5xbHJlYuUCB67d4cUIIrCESZreplzZROBxFICrFwOAVLzgH3o/0b26EaiZTT\r\nXTtzaNl/kLew8JsqOdK/qeQs7GRwTKNSZ1GofvllLVGGiC44DcczoQPlubuH\r\n9LceXx+YsV5vJH9wGCPLwUkjTternClH9wddPOPDUgsjALjg0olPfoEA2cQP\r\nRtC9Cgo8DJ3zGndZRBS43zjyTf9rlyB2sAuJzgv/bG/p+m5xENUInyCrhDLM\r\nk0czVUdTFXxbk9DGkd1Nh4e5GR5ZE41rPb5icHu7gDzxB2oF7SFcYty5lcvl\r\n2zK7enUc7Pjeih0CjuuEAUHwisYMn76wElY=\r\n=hU03\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e5e0f255c95f5e41c3b17adbda28fd09f7251642","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022117201925","@chakra-ui/hooks":"0.0.0-dev-2022117201925","@chakra-ui/utils":"0.0.0-dev-2022117201925","@chakra-ui/react-utils":"0.0.0-dev-2022117201925"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022117201925"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022117201925"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022117201925_1645129198625_0.3853483564089153","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117203714":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022117203714","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022117203714","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3edd7f66d246e4391ee6b54708cb4524e57f0ff7","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022117203714.tgz","fileCount":22,"integrity":"sha512-SfwOQPgsQqh0gH9sB3C62c2mbLi2V0pjQwJSlPwXpspDN5fvzeg6PRJM/z4xCmTECRZ/8j9pqJHAlmOn7BtAcw==","signatures":[{"sig":"MEQCIF9YXQOTuys09mIEMgn82W896YTCw6U/M2JmRcrPToLVAiBsvMdqLQMJvc3/jatNEfNFF5Des4oABhW+8axRvyJm7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDrIfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZrw/9Gw4qaB/5KCcsMst3XL9HmDMj+vv5eEnmcl4tAOsYQaOyrtwk\r\nGTbMaNrnC9emI/k7RPofBoZkQXv5XU4XdoQtpIqRSm9eqY36yeXYepI0Pbid\r\npgIlnCpTUxtieer6QXgBqQT7fsBljqZUChn2YxlGJbtdKs/IcAS5fJUBCb8O\r\nzkcnAD1bpoKKyDaGQBwBMCggekHIuoDLBTXZBGyXpvsFnYgmxLrJwHYHUiLi\r\nZaVh32zjS9gKzBzzxsSnIcaAWhswn/z0A70XH0gn9YH4PQMdy9Xoo3OjtKC2\r\nuKLNDb/dzVqJB7QNFvQbbxhhYBjO+Dh9853/PmV0VU6LC2Uh2aru8T/pdBWO\r\n5WsYwBNjKFzeiyEn0JcMgtuMwFQeOeA+11apj8kxpUYsclP4c/lqDrWTfbdO\r\nnaN9qW89UWgwrtpdb4u5MbxQtN/zUf9d3UL8Vj6693soWXNvZjDPg2Ce0Ap9\r\nHn9e/UdGDtRYHMlVH354dMgftWYLzxEhwm4tpkLAvRUsSzl2W2WtGhN4ewL4\r\nOrvu4s2w4WlJeckH2dok0wxnsuv/WAPgpXAWjJ6dk3xrKLHq1Y+4p4eY3kVV\r\nU+eMBf0iRIFskLMSNvic0FWwIJ+AafAh9b/vcB4nuUoUaR4B+IVkaMoQwhq3\r\nHRImlHe2RJsRnlrBMV8gghsNDdWK9eSSYlU=\r\n=sb48\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"0542b8a53425093f18fd86d2b55220d3fa20253a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022117203714","@chakra-ui/hooks":"0.0.0-dev-2022117203714","@chakra-ui/utils":"0.0.0-dev-2022117203714","@chakra-ui/react-utils":"0.0.0-dev-2022117203714"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022117203714"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022117203714"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022117203714_1645130271015_0.524295483652707","host":"s3://npm-registry-packages"}},"0.0.0-dev-202212083710":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202212083710","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202212083710","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"34621a212f9a958ba66ee3c58b6b101358252a4b","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202212083710.tgz","fileCount":22,"integrity":"sha512-ZCBKd9K9bNPtOtIEhp85Au7GbOYplQB6T27HjA1IRbMIehfUhqGev1aJJ+LZC6VjkXGkc+bxSHx8Ux2rv+MvCA==","signatures":[{"sig":"MEYCIQC+s1yIZOrnMbBy0O8HksnYkRUoz6dU1XKHmldUPoFKxwIhALUepMtW50ZeUyQjs9vx6qYd2am5at9L3+hKtPVj6uEJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEf3cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqbig//Xi3Yh+dkZfQ8yxwx48Kz1AKMKPBwgu8OmecVeMN4P4foSw13\r\n0u2BAMSan4i3ONmqauZDiSF4GHe7znLJ+nYa0kUs/4SXP96Ht40SNDXzxohj\r\nqnOtPvd9EIXUFkBFj1oKBMtHJW2ZnjPrbsVt5XDTi/A+8TT3SEgehfKHZGuO\r\nZDxny/EegpzfylOjc2b5fvMnb1niFjbVSEALQuf+YomNrn8e62djmRYVvfZF\r\nl4mo8Udm4V6cABVuefP/Mpt16N3oHSpEY/ba5l7cxq2WqXQP0hJ4RyRsiz+c\r\nlOJTlEYl/24k2uXtV7PbkkEAve8XIr45yYrxYQmLwUSrfNymTMY7u9MsQTUr\r\nOk4Rr/bsEznkFEl4KG+mfIoM5uW2ZkH0TPyI+oDmEILNJMH0QSfa2xFBGWx9\r\nZbyreeXExHY/QJRfUc/n9xYC3x1GALTofNxD7/2Jf4btWmKcjikdQovp2w/X\r\ngDEqfl/j6eEYML5yb+dr/jOnth2rsaoXhNFF97Znq2uFLHKVYBHPBp3SFRED\r\n08zzkG1vJpIggT9z5v/JoEWLi3IoaF6ksO2/nyKoQ5/H2jQkSWXeYYtdQArS\r\nvx2dDEJlXz1WB77Lk8+g+s6agoc4PMaNpOLibbz4//alGop6aC5eADcAT0qG\r\ni1RjBE94zy1Pz11rj8goQHd0RUEOlxfURrg=\r\n=6o+V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"085bbccc59f9c00b57caab647fabb43939d97247","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202212083710","@chakra-ui/hooks":"0.0.0-dev-202212083710","@chakra-ui/utils":"0.0.0-dev-202212083710","@chakra-ui/react-utils":"0.0.0-dev-202212083710"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202212083710"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202212083710"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202212083710_1645346268036_0.8821120342324684","host":"s3://npm-registry-packages"}},"0.0.0-pr-202212011232":{"name":"@chakra-ui/form-control","version":"0.0.0-pr-202212011232","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-pr-202212011232","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1052486478148216093d257dcafb472569db7254","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-pr-202212011232.tgz","fileCount":22,"integrity":"sha512-GE2yMYkB2GgIn+X5Odbo5vUSPtsO0X8g7X9mbcMEMM1DILWWY9yGWzdVaaQ1QQC0Rt7hwNopxjEJwvDPsd+BVA==","signatures":[{"sig":"MEQCIFmxCHi9tpamS5ombOm0x1WRzY2NS0opjuD3lfcFBiX7AiAgkSaUvEBwX3AU4DrUXE33lu9Ysb2tQaZCAM/SRtTCRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEh/vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCEA/8CEHq3YQgJdC4RInwbcVh7/Urbswgt4iOpzCJBkfxhdmbMCxY\r\n1sV0RCOzWvSg0aEkV2Jw2DFIlZ5FkxhyPo9ePPwtJ1bvdzyaKXCVW+0I1VTw\r\nwuHvSDFx7eR7hjMwMq6gktHR657oGU11kKPF8fVG0athxozp49GlZd22POlC\r\nWEkMx+lJxfW99PCKKbRzObd7QQzuZMkXVOjqKNSmON3f3BXXPbwlZB4iHcOS\r\nWikSFKMJEgdxl9uKFXoG8SQbvI8AH8pWKX6bs7g45jgMfxqckMy22Crh9nHu\r\nho+LfXeYpBNNgZ0FKGXYeadsVcD8fs1T1YUDf8VopeYsCeuWl1WHnMZ+q2/X\r\nKQqtN3dUylruUN0Mn/n/XI2DBHmRGTd/yUgp4PYpkgFuO8ZvqJpZ58gf3eYl\r\nbc0UVimPTpTg/qWl6y2Cb7jelUW8xHFjJJ40/VjpUPLRr26XKjcyoPeGD4at\r\nqZzHQqtyKvkZYCNIjzOfXjDLdiy0qhXIygU9uL02rnzGEg3CLtgYuscby7BS\r\nBvjqWEflEf7cUwQYwD0LTL0BRRRqW8GxECg/SzzmmyIZwWQ3n8wDz/iExOzR\r\nhRM/lOP0vpqh0pqqaMf0E5GGqTLdOadT1if3uIH9l08hds+R20tM7624FXqp\r\nxUlEsS5ZhsbhzICHmtN3qnO7h/dPmuBNBTc=\r\n=ZWwt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"a870e6b94367b7c6448d5c5c5aa8577e33e15e3a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202212011232","@chakra-ui/hooks":"0.0.0-pr-202212011232","@chakra-ui/utils":"0.0.0-pr-202212011232","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202212011232"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202212011232"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-pr-202212011232_1645354991715_0.49995442427743897","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120113958":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022120113958","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022120113958","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"11eae2e6d9403c18ca75b2b82ba4f795e5ab20c2","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022120113958.tgz","fileCount":22,"integrity":"sha512-fuOMXD9KAp943x2uIXdBGzH+c2SK4wedtFb7LhBjzyTOZvmkX/hlgX/Q4dZypWV1aaTRCONkselg+70Haee1Fg==","signatures":[{"sig":"MEQCIDFTkL7eS3dRUbcXtNXNJ7pzlEmFdHCo4wlDFSoIzGb/AiBjtK6xH6xaqJrS1OazedtfWLo2/uqcE2zrZQuLh83opg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEiixACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZJw/9FN6SAvhB3uPDapzVOrHjjoEHPI11ak5UTLcC98mryUA7D872\r\npL3TYFjEy9sBcM4XPYxsAi7O8frLU3YWDTzWebvr7VU3GHgjQDijjZQfxb4W\r\nyS2ldJdxDLpO43GgRIM/yJ7dvxz0nwPYgwNfRWNvT5L7X8rwxRxwivaTOhqU\r\ngoI1iXLAKZs5UBcBnFNjIO58eFGIAJJd6GEv818Djirv92CD2VRIJczURtYh\r\n/TwbDwK9hkDNZ0CCn+KavLI1bgsMXC2meAEVsPmUeQwqz3UMYSY7zhbzob84\r\n83P59zGaVppcywlvhnW1DPIoYXba98StPLhf3nGk40GOtbxmqZZQEKpJQl+g\r\nD4NeOcyx/3hFHJnbEHV5uK1EE3JpcmE0c5YwZd2Id13FpVBLb3PgNDZa6F1/\r\nR4xJB2ROBn8hh36CEtKm7iEb74vSPim0SHrhOYqaSGMa7qlSAwKMkT7woxUZ\r\nl9FdTW/Fj3rzfij2M7bx2WHagfK3g9q9KkjhbkBD5MibGjTGTpYC2deMVJbZ\r\nFeyH9VUQWhb9l3V8mtzXcqe6+zm7iryxWBTnipVJ9wIPcwk1aKGJCoTc1p7R\r\nshxSdqVwKipi80feqyAB+xS7LSxxDEXeGVQ40AWtC79FFCc/ZzkR8P+UznP5\r\nmtzLwknmr95PPJk+W57tBear5iDyI/JsAzI=\r\n=AHrK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"99c92df9331e6a0c5667b77e5a605343efccc6b3","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022120113958","@chakra-ui/hooks":"0.0.0-dev-2022120113958","@chakra-ui/utils":"0.0.0-dev-2022120113958","@chakra-ui/react-utils":"0.0.0-dev-2022120113958"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022120113958"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022120113958"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022120113958_1645357233395_0.8626703424302262","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120114012":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022120114012","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022120114012","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"302528802e722f9507471e1df81680db2eb9d4a8","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022120114012.tgz","fileCount":22,"integrity":"sha512-AsEILae0Y35t+z0e3K+CNEKQFZ3N+AWZBt9V0wJQZKixYpD/BFAL3/zjQBrxTomPcjzykT8UJ4+dXKh0q32IUg==","signatures":[{"sig":"MEUCIC3Rf8IsCXddOnaAjjQEUT5/ri6hyOTA3XuODHSXiv+jAiEAs2L6WGnD+HmF12SM1izQ088dFAKa8BXdhOtm8rYmvHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEii6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpaQ/9GJhWEYbjUM43HnaxuEEXyKJaqIuxlDR5R+I9mcGpVIdtgLcM\r\nYeZev8WBsRqHymw44OvpWTcZGFuzr8cVomFAqg3YH8FcOig1BWEOibZO45Qe\r\nE3G7IEUDPai1aWxpFmiV73VXJs3X+Ozd/L5pA7v4X1BuD/7RuE6hzNWAAG0V\r\n2bV6cB4HI2Y3oLraGtmHwYkRzmlfp1jDM3aQ1J4N6bJsGpdSOpgHC/6kVeIN\r\nU9n7c1XtkTbY39HGP+L4Z3Qwik8X9daqRMkvIT7tlPs25sAGDV9N4IcdmFDv\r\nGBpizRvHURVYu2EGExf9vJpt8NxAgw0/iApX61yhodYeZX6Dx9VpSSjAWoIL\r\n7oA7Z7RxsGPJKJ21c3BVeWxnzagoDaMP6O3tTQBR1TMg6Kw95YnCPMfWeRrV\r\ng1JxvieOnFR+1W4nVWwIKhpvJpntDPKsqH4EolM1oC3VYCOlWwI15jaw2Iqt\r\nYtYSdPEZ5O4fxb9RlclH0+WR2osre8rZ/uaTdCpWjctaAul80rnZb/9w8/2C\r\nyrahU+TobaSH9Qc+CsIfl9/ixb7Db9dq4H/c5ySii1N9ahAIq4YNTAci246j\r\nIc6o6CiHL7FtMbTf/n5RHHpNwjxzcWNVFV4+hFtwvFuMG8niTa9VSFRNeWO3\r\nSQMo0GyriL4rLJmDGTRRf2Tf9ECLCKZ7qps=\r\n=SytN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"5aa79f81c71b1ac28d1ee18b4cc28c908b68cbfb","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022120114012","@chakra-ui/hooks":"0.0.0-dev-2022120114012","@chakra-ui/utils":"0.0.0-dev-2022120114012","@chakra-ui/react-utils":"0.0.0-dev-2022120114012"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022120114012"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022120114012"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022120114012_1645357242111_0.7639409081652124","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120114225":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022120114225","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022120114225","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9caa53817f27c7e00ef6f56a2081de1f2fa430fa","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022120114225.tgz","fileCount":22,"integrity":"sha512-UfQdyWa24yyu0imVQgisP1fJp65z/veytl4IrViSrxg6KTY+hflcOkYH1Re6MMe/rtaWoPbFtf8JHUdorSFtEg==","signatures":[{"sig":"MEQCIBD4IcfPHzOtb5xJCN11MbwP1bYBTctLS0l2dnWwtpdSAiAlb+Kzyp7fPSa7qIl03la6Ufyx4N/405sAzOeMBFz6mQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEilGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVIhAAn66g0lP/jrxCx5hTGOKEw0dC6/zMqqJSdfbghKHoSrI4ePuD\r\nWMbhU2rftgTm1OYFShDcaczr8A9gM8mW2qiU7ZfC47YZuyFJcixrGMzDm7U4\r\n07sxG8c0ZPF1okpY+gUEgK7u+/Yvwo3o9TaUSTtdl8xbrpMUyZy7NuzczSiR\r\nW4p4ACXj/wDR2MS+fJgsgZVZM+naMMT3+6WJ16XH43l7XfCu5oxtD1cHB8uA\r\n1/jYAfdGp2j4Oo/KQp12dtdrzY/uuCo2Stgmfmo07JxtpWbKTlE23+3ijekL\r\nZxfKlXZP52375U0kDxe/CWBBVxcTgEd1zz36i7RpLjcYs2J8EctzuxMng2pX\r\neELyD709Slp4cBDRYs+vjALMYDqqdc/DvQqbgCqPRcwW7hyKTeqy4IJ0LWco\r\n7os92KyvSNa1pw8ugB5/1QZQ5iYheX7jTWwMlxwB63kLbEhx4IJCLnq5Hncw\r\nHpMGK8Vnv85Q02DQ36ofa6b4q4EdCbglC+Oet5ngNGRxmhDIIgzJm8p/F6eZ\r\nGw8VX6eFvpDiV6sFtzze4zfZUwwE53LJny/J+64fnEhOxML9NJn7aJpmXz+m\r\nd3fkXcjTTMJG8XgnsX6CvlzNqvZUXdkTbC/fJcXeUouN2QK1FDdbRPeg/h8S\r\nLt5InbYu5dy/brX5f5UsB2bEcfwxa3zGx3U=\r\n=Oc7Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b0da6e6665234c1584403f7f7251390c3a9433c8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022120114225","@chakra-ui/hooks":"0.0.0-dev-2022120114225","@chakra-ui/utils":"0.0.0-dev-2022120114225","@chakra-ui/react-utils":"0.0.0-dev-2022120114225"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022120114225"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022120114225"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022120114225_1645357382548_0.18504163309441468","host":"s3://npm-registry-packages"}},"0.0.0-dev-202212012129":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202212012129","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202212012129","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a6039bdc1b0638bd46c9ea9c18ce445bf63f7d08","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202212012129.tgz","fileCount":22,"integrity":"sha512-iC1+5MkrDP4mWlEmTBEKf7nxpz4if13kk305XBrlHx4jJV9xUi06JCrPo1yazC1PTPjX+sly2nWsnstpIrKIyQ==","signatures":[{"sig":"MEUCIGlGbyK0SFWcaGwDYgBEz2K8fHOa94da+wYucFXNgpY7AiEA6sXp5+IejeDxeZIouypGnDcY2PxdChEiW3zWD2+KB0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEjA8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdMA//blELfOCqbZnhF3SHT/pQXQOC11e2ty6hyL1XJpzTafAQR+ib\r\nP5td9kGmdPHgwa6QxvR8rRKRD19DXg/cfHPvTdb1PDWwdJvgiWf9qxuFOUZM\r\nMJUeoeyAc0IYD3IxjZXG92v0C9/J3kkeLJDFQYsYJ+0lHCqUkK0wZxWROKiy\r\nn79pcSwiuKO6OuNHTrvksUWbNDejDcXaQgkt8CNzXVPLW6QJV+bzMz9381Nn\r\nv6GyEPHOUsc9m+oDrhVNri+8wpIzTtRKu6x+ZWS5EDbIilfLoMkuJLoQf+mv\r\nTvS340qQ5Nt2zG1TKuDoHMhHzU3/Z1qsZrVp0TK1jTttHUBEBFELsxYgYRtq\r\nHKiDVl3Gjk1F+MzcUAg9a7FQWjK1RiANnXaW4eFm5GgYD5/cpYAN/1v7dDC9\r\nDJODnJUNvVAXEqIyk6kB8TGeMa3MZZC29M6m4Y6mW//8WCtBQiakh70OHChH\r\n9MQAKUU+KnS7trSM9ph4u3zV78w2dM7lrvvxGZGakbgO5i+0hBeCn/Hu7gx3\r\nLTT3cXcAGsifQgMXLtxRfsA+LZHCvftg8z9bHMtIsEpGTrO5NvYSzI8hLG5A\r\n+3demintfM+JH7pgZDKrqdFKCVYxOPbYlw8FYj3C2A2X6Ho/QtCvMPAZvygw\r\nKOCrr1u5VJBVmO0j2/a9Tk3CwThU0+QxB2k=\r\n=axQR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"651bec5b1999ec3edbcbbee297fc5b6ecef53f34","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202212012129","@chakra-ui/hooks":"0.0.0-dev-202212012129","@chakra-ui/utils":"0.0.0-dev-202212012129","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202212012129"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202212012129"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202212012129_1645359163918_0.42388772068461344","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120123118":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022120123118","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022120123118","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a018e67e2118839158b3c7d5cb7cf55fb561060a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022120123118.tgz","fileCount":22,"integrity":"sha512-zp225yXceagVg95BZcIOggZOqQumFGBSZcxa/fLgmbnsJ1ZD0FFZd7yM1IFlAmDitGxnIhrXIB46vT8dgFH97w==","signatures":[{"sig":"MEUCIDMOgRT3S5xDrgxq1q2qZQrAEbUENV6x8TiaU6RNbTaIAiEAl0lXPTm3TFLGKgHd+h1gfXqC+69VFYZRKL8PsSCuTKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEjS6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoI6xAApM8taZRdWRmyzFsn5pMG3hnzBXMW861cX/5uErgtKxoIbm+f\r\nis2e1n/9JgQyEKjScGTNebU3ONDTAAzx5ZhDvBGntArFymTWi82icpLlIElS\r\ntd5pqzeoHeWojfnEGHZBYg4ULWLzxuw2O5eDz+YAjZkntFPLw2kEzS2coY2f\r\ncaRxdULNOkqTX8eI2zl0JWc5Oeq0ko5gx/Ho9RR2mzbdhbERMhbdl3LClhNz\r\nuPw7rVOVn2nEpsyFJMTWhvTJRGSXE8+XcivQa2ns4VzkC8aszerndIM3SCcZ\r\nA/NTh9MBgLen+NA7xfQylV1n/2FFDS2NUYTCLAz6UnbUfvBGQVvDxhHx4ZfP\r\nZFIwav9qacwX5qLDZ0plbYjCGzzWPeMePdFWBQUqKnHR0hQ2w9kFlptVWq3A\r\nKXafboLfZlFuNGEd9YTsbf7VuYdjn/oibwhrXx5I1PRJbzaWKgAL8mWAgAEj\r\n0N3WSgy2gQKIoB+eY9BiwfVOLGgtsVRaxH7Cs5EJzHLAQLCxXM0V5+b72eIQ\r\nXQ1XADcNRlKfzD0Tccdx1wnAeZ3Lzlx8Lo5Rg2CO/X+I1aX6GqlG+Rqqm4I7\r\ni+83k0zs2O3rQSrtx9iDhN0gzxeI0rZuyFE2LZfZGsn0O2//HQ4ULHQcdzsB\r\nW5LqOhJIRB6M1s/6c/b0LDePtt+8V63BKhc=\r\n=D6cs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e1fe48cbe37324744cfe6184d785c093cda1125e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022120123118","@chakra-ui/hooks":"0.0.0-dev-2022120123118","@chakra-ui/utils":"0.0.0-dev-2022120123118","@chakra-ui/react-utils":"0.0.0-dev-2022120123118"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022120123118"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022120123118"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022120123118_1645360314362_0.9720717492100275","host":"s3://npm-registry-packages"}},"1.5.8":{"name":"@chakra-ui/form-control","version":"1.5.8","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.5.8","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9003107f46afcf856adc38c01849c8e65e9006b9","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.8.tgz","fileCount":22,"integrity":"sha512-1IQ0xKuQ9//oWgc/Q73OPvs0Vqncrh/gkQ3ckCE7OWYSp73tMrNuMbKup/wn+gXiWIxwv5jGRLYCPD5QsA/bWQ==","signatures":[{"sig":"MEUCIQDAnO7BhRecoqZieYjrBn4OX/A3/GjrU3cT3GkCNt/ByAIgIm2kPOcogqEpRp/SlhZ8GhDJy+HsCfWvSJ7y45kO/vw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEjbcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPSA//RNYcrA8HnNIv4cToBgKf8C1Ng7YMNZjmiNTcLz1oXsHv+Fp4\r\nCMAVVVHGeIVBEfQsVPsqYmOkdT1KfsUYMsOufcnjX0qtTH6cNylz2VNlmc9A\r\nP6U8Z1ts/LH6BzWfslqLIRo7CQvLpgHv0Yfgr0vbFxubbuok4/1Tdddfrbdu\r\nKu9Ns50W7LrE/Z1XGGjk/cb3A/qTA+OxPrqUG677XM/m62q4gDQG2e4ZxxSC\r\n3CM9vRETv0iGsmdW1RRrgDihCbVBbCyYKzeLtzA9T2uxzfHSv0oyAfJfVQ6E\r\nAk2sZ86Jfzs2JYz6GvNg5A4Oir299NjDxUhwqZsox6vsOJFfAFxiAmxI/TaK\r\nX9gyFC9AyRHqBRAbMkkbSkzeKx0Ve4+STXDhO/HGmiD4tBpCOTxBvwb6J+Ug\r\nkIUs+sFFs0UxqtSeN5mtcgpwsNyVq8X/3JviphHUQmu/f1T1zhPOt01ll+f7\r\ny8N3sj6WsDi4Lg3o8ZTEq4bXwGwsEEd85TryH4dktqxa3U43AbeSrw2pAKEz\r\ni9odVVoV8TlYulf22CQe7NAhtPblTVxj2aC6onw/ZNhs7dwf+ArZAkGy944R\r\nKn0PbPNVnZy+ljk9z4otDB7HLobAxY66NQVLWM7HJ5HuwfjtcDn2Kbqd3yd+\r\nRBGxWht49pzT3hdyF3EjDz0w5gnapnLa2Pg=\r\n=9w0X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","gitHead":"ba2fe6c4b856ba3833226dc7b6a15dc91173719b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"2.0.5","@chakra-ui/hooks":"1.8.4","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.11.1"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.5.8_1645360860449_0.39012577971487006","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022128214753":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022128214753","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022128214753","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3d4ffd8e1a5729760dfe6d50cc2558b89cb9ef15","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022128214753.tgz","fileCount":22,"integrity":"sha512-9axKtAPVPpD2q07FbFcpmLfmIugZSpuqE2MMbSKSQaPLupSBYnSRFYoCJFloaBnlJwFO+YV5bBEUaYS6ql2klA==","signatures":[{"sig":"MEYCIQCZfQJ0kuSCx54P/1I7mL/IFSrvDbB5ox6/WF1yx0nEtgIhALVidfdVv2OdZrsJmfcJetn3G+eTgFyHhEHusaI+Ls8M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHUMlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/QBAAkq9xjvaNd5Cr0mSYiyI+lg+EPpiDBZ2A93oD+5kkmKBlgLDN\r\n4VyAhK1McaFb8QODsiPy/XkpyldasLmfR3BRER7xblzsYWQ/Pz6/YkLUMsxW\r\ngUVkk1rhQdBr4oW50GY5IbdGhMjrZTyzVpySEmVLhu0gSb0wyetmq/JwELfV\r\nQPQ3AZdGhBbh404niWG/TqL8APOA9Hi6GRKY8ZqXXWQeRcTcyqBAqBT1UEcR\r\noDjPo3f/ibRG8EDyKfljf1Zq1jfNCQZf67w8GCRtQLX+1nPutxxaGVBtY0Zi\r\nv0TbK5ACxiNv80MGyozZuL+5Zbj1lcQtah3m0uSG5V6Q7KuzHw9HoRAmJTab\r\nJ81MLSCB0Cc5ErqNWLhEKkfUL3uB88w+TYulXUJJMi4V0eNdmaAi2YWyInXW\r\nMBKteJtkxcbOrkcKmAuKcA2YS2uyX12a9p8XYsbJLCNF9gHuYcLI8BroMaoM\r\nIdgWksDVLJ5kuR4VI9qnKSDEH0CIRyTl3023ZyCY63EE+GYelV2GhdZt7Zx1\r\nDR/zVx8TaaDbiL2rb6cRpQBl+Sa0f9afTns+8DIQ4QakG3uOU6jTjPh8TOf2\r\n1kkQdZSk/XeXcBqKJyEBofTeQIJ6NG0OCBt69OyVb/S6cwnSdjnoC1yoV/FO\r\nggFq76IP9dqrUOz9nycQW3cjX53LTLT2ylA=\r\n=4vh6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"5cd5cff35e4837539d83a2157a07585d461b0aac","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022128214753","@chakra-ui/hooks":"0.0.0-dev-2022128214753","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022128214753"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022128214753"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022128214753_1646084901405_0.23520977585959235","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022128215052":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022128215052","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022128215052","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b86dac33e031ae071f66887f0f8156500107730b","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022128215052.tgz","fileCount":22,"integrity":"sha512-6fL98A8IZV+RqJmV1ZYcToVg4H89gAh/TrqrBF2UsfCpvOwZDgnE9xgrTkjXMyeI75KC1TO6U7cN0ddzXip3vA==","signatures":[{"sig":"MEQCIDij+SkuxS/0uYYCpb+Lc+VF0OQDXFPAHqK5MRrryN4qAiACucDwfcFBR2C0xH7suIqxBi43deu4BRD9gSUYs3SpHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHUPXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpv/A/+K5SPIXVuZVOpBbyG6OGCNWJf/mZ2U4FPAcpjHAMTdQDuRCNS\r\nZfNWa3LOLmoPBzG3NtzDOft2jtQmJrSWmG/0ZH4MqGyKsnNmUxqAI5rPIXuO\r\nQitC5V/H+Jt03GZQOmuXrY7u4bJEet/Mobs5+L+vdBrOYCTkbCplUHrcSwIo\r\nWH04OeQQk3My4JKwjcSxj+qgXHAvr5p4/3AbCd2nq6QwmVSCQzXDRmI2g+wd\r\nneqCjIgRRTpV9daeeQufuEmWvtCBqUDj6rz1zypTrphSBxOXT886j6q+sW8K\r\nnYiDNXeZ22faZSF5GTjxbxtVlc5mAmFwy5gA/NvVwNMR/SD3B817OgU8G/z+\r\nHWvaRaA1P3vwkKdLH3jNSP4mRRtHP1FgW4E2SFQruG3SjlNmWq8KF/2sU5P/\r\nxUbIvDKxElNiWpSiueEfnj/dDPlp0lMwYkf3P3Y0rZA/1Ey2cY+nKgo1iMMI\r\nvbT5449dsON2osVOTooXjgvfLzr00sOTrtCF46tlQdYxGMilKtboQLpIpVrg\r\nJAXX/IAYu68To7OZbaH2osrdJJPIKv5ULP7udnjy+e9Ik6KSvLC7JIAMXhV/\r\nAu+naNjgbepvvZ2xNXS3FLLOm3/IdPWnVw9kfDpEkvgj23ZfNK+FFgXysyx8\r\n4ZrghElufgHZ1FXEDpTCCjE/79wt1jD3b/c=\r\n=tx/7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"001751162dd1922d8ab53820f405665f0785f196","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022128215052","@chakra-ui/hooks":"0.0.0-dev-2022128215052","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022128215052"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022128215052"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022128215052_1646085079492_0.5232839790230595","host":"s3://npm-registry-packages"}},"0.0.0-dev-202212821520":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202212821520","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202212821520","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bad82ad9553c30f177bd6f4d0da3e979897a10ed","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202212821520.tgz","fileCount":22,"integrity":"sha512-gMSalqCe+4RMvI7gDz/0U2d6E2CTxYG2Jf3hb7DlGpm02lrgWYMb81mGvZxYQQ5klX69LjmDTNH+R3vGfGKaJg==","signatures":[{"sig":"MEUCIDKjngjrPBEY4b592bdHM2yiWIPysPSVOrGPeraTP+JzAiEA81luNudl5t5tKV0fk2px5tHv+Jre2xFgyMrp5fQAjGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHUQbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFNQ/+IWmODiYvvWUfsrlsjeI66lsITYtoSjqwSbQlFlcuKX6TtD21\r\nUiMD2V5BhTTz6uBjxFUMH8gqBfoor0myWJwJR4BFyzaHrXFjilfthUVMQBYQ\r\nd7AJGTFJtDjIXXrg6iV2Zynqu0Dwac3deNmKU+xp8RwXQgNb9Qbc4Bs3semU\r\ng5ZdV13NF9Ij/BHY3F/xw5T7o36H3BqOQ/HW/MiA+8ZohhaD8NXqyIqLDbpn\r\n2ARrsIsvaneCxADiZUO/e9f2K0zWF1lobpADkXyaOwN7hWau0KNSJXeoW2mA\r\nLk54BH730QG+GhzLwFlL3Qa+aJNjHcHBwzKlksI9rkiEWL1P45txeS273T9V\r\nY5dM0NkKfzMBaHf+PPVm6dU6i/u9Ao2T0jM3FVNwVrpmlY8J3FMKYXCWOtT4\r\n7uPKBZLp65x4an8bemmIp74dHgC4zpg9cRmNHWrQshLv+XTnOU9/p5NvA2Ac\r\nqNwRZMAd10uG0OGgXD3X7ie9NtuUFIBbVg7gA1ENC+Tz+ra5/DIBaat1lrui\r\n0/d2YY5yNPxFa7+aXGemGLdtUjSRob6TR5b3FMkFWtUxqcKabzp2oS8NjwSH\r\nZmHdO4A+UZ8cxUZcadR17pTmlgi1Q0muEV4dnLdY67Gk1zUXR/PtcHOxiuTL\r\nKhBdJ5TYOXti7ZD8mQLcnuDGGDB7I2QPa40=\r\n=MjiG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e4da6359d0a007a4b23959b0b8feed6231a947b6","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202212821520","@chakra-ui/hooks":"0.0.0-dev-202212821520","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202212821520"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202212821520"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202212821520_1646085146987_0.6913419323198524","host":"s3://npm-registry-packages"}},"0.0.0-dev-202212822477":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202212822477","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202212822477","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8f00c90cb986676fdfa00cde7ac69e71fa795dd7","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202212822477.tgz","fileCount":22,"integrity":"sha512-k4cQzHpjyUy2bWh7lgkCBZeAfz9W/ouBHu7pNBabIDf37Eb0dF5vErNWUqGq8W+/82G4L1LKlXaI1X2I33gq9Q==","signatures":[{"sig":"MEQCIASHliUpR0KHjs9epPN6h8tZ9JKFuE0VgnBAZ4RM7+UwAiAxCMZF4tr9M5wXPAKqW6UN/BWK1AbB3FXahTvKfwtptw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHVEGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpM8Q/+Jf87LbVEMFZMN88nyzIM56mXfdxBjrnRJmaNRLHtESjEd0GR\r\ndP1jIaTj0fJ23YivGaomQtgtjlIHHRWs1LCJFhuQNLOU3qS9//emArMyWo3w\r\nbYCepKBfX1S+mnoy2Icf/j7GZWYYeF+qrSaoXkK/SZ36U2oABuYaQ4hBWi4t\r\n5RqfI8uZtuPnc0LEfPrjTiYlAUxXB8hhZZGjUVpShKt1tOIp35eEbJl4UelC\r\nrf7nqjC82rtPZiEM83QLW74RD6PPusbPyrj7cVn3qcnf2n0PCNTPxfpyo150\r\ne68guYac/PzVvD7GGq7GmFGWBc0Q3mWhKzCHKS8fgOertCvb4yg1FlaCRrPS\r\n3/JsXY1sWfcXPJXM7QwnEnYWag3BTevyXf/csDj1iBx0AuDiEpe/poQzsSuc\r\nP0iqB342goRP226pisVCXUHtgaxlaCF44upfC5aL4fk04UJAlvUaNdW4JiOa\r\nXIcPXfkw6z5xJA8YfOvWkSebsgMd8c0QVGQy6E+qvhUt0O2LD64tknaZbG4/\r\nNuM6D8II46NTooXi6D+VcISmh3SXFCDVgQilKSEsI1XGkjtYGUgBHGjIiInY\r\nxQA1wK7t/miCLiK++M4bHYLcffmaliIIXXqTB7BpZpHP1SxtBI4QztMjOrmN\r\nrGSstU2oBspqUdTfiLjgKxxVr2yUbB86WVk=\r\n=zwKn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"fbe94622357e22acaf8bab0eae33ceae663d7a5b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202212822477","@chakra-ui/hooks":"0.0.0-dev-202212822477","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202212822477"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202212822477"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202212822477_1646088454356_0.8126927159940678","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022128224832":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022128224832","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022128224832","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7715e543e5af5b2e9abac232313d7ef226e942c0","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022128224832.tgz","fileCount":22,"integrity":"sha512-gTiXybwAnfnWC2DyNfKxngdUBQjij8owpEpcwaqfjugEHT7BAwoyPig/NkqHzB+gIzzi48zy2fdsPdEIII7A0A==","signatures":[{"sig":"MEUCIGCr411vmnayhoNZ1Tsc/S+UaK6Hb7P8YxC8eJuaYcicAiEA8DY4DPa8zT7FmtXOloizXlysMbBkK55JS10ZiWg+dSo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHVFcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6lg//Ya0hQDHL8G88x5AiL7Yw2RPp4h6xm2qTOrSwlnrLeDcAkAZn\r\n95wId9lsojnlDxqouQTPQQa4M+OZGW+wOpzFfkaScKVYhP5ZLmATnNq0NSjd\r\n569Gpvib5xUzj6fk//A0Cl3jLHygrHcXv1iMsy5EoEl84GxE+Nj8AT3JoF4H\r\nEH8WST3eOgu+Z2/Dlh5cjgf/TqUEZA9R9srwR5z2Vt/1GWTKftFREO37RR9A\r\ncwKXUj3YUCNwD2SPdJMjohInbClDUGQNFxSFrvJIQB2LU+nZvH6PZGGFrWPB\r\nUQxG6shwpe7RlhPs0nzjBVQhAAImCHu+gXfoAESHGWlnbiXnm2xLwaFU1O2Z\r\nOXv9hCePq9Vlg+xUxpKqha07O3VG/gAmV+Ejv8uNAX4dBr5HZVQ55cyzHxBA\r\nZeRZoWfk/SbgNSSQOPCWrbWrGDBiJM0jZcRdRLuAxeCh4HbC+LRQ4THO2eok\r\nDhAr048hVqSWrYZVL4PziAXuiTeyPN/hVplASh8Pq/rZVc4WqrKwXFiaYIgF\r\nuIyqCPYeKuvfsOsdvIK988JvU+KptLn7vAdlW9mLkvuN9lCvtMbDPuaopWRw\r\neoCVBNVeJINNaOgnL5ONmJKzAEAQEhVnkg1dBeXg5goUQJUMZX/faTvs0P+B\r\nS7oghdDZrPuScvBUSp0m+WqtnJnXUu34lXs=\r\n=wQFa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"a1e4d7951090c9622003e9176005ad3c038fdccc","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022128224832","@chakra-ui/hooks":"0.0.0-dev-2022128224832","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022128224832"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022128224832"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022128224832_1646088539932_0.9738187448484232","host":"s3://npm-registry-packages"}},"1.5.9":{"name":"@chakra-ui/form-control","version":"1.5.9","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.5.9","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ab74441162aaaa09e455ad7fc5921ac3af5ea493","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.9.tgz","fileCount":22,"integrity":"sha512-JuUB9dHXFqTYm+Z+cOULk56AcrX9y3eaied0j/KGdPwtIjS2kkjulq7A8sJJdsle4M6XleMinjW+1KO2PMExQg==","signatures":[{"sig":"MEQCIBmbSn17jkuhsPIrjARXYIu3m6UIn7/D4PBfSjZbIpWPAiB2iYhPejWc6bIzBFyFWTMFFDW/he4zzHSRD9Jb8o4g9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHVWeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmps/w/9FxHDq1X4X5ZiAgl5aY79Rs16hPwdwUq0bM8SDVsSWWgO+jAK\r\n1WJsjRc0IJO3y9iZnz2guGHgrVOiXjwghA1+a27oPwvPcUzgfbC8HHN+QxFg\r\n2WF12aiH/+t293BIDFzNvRgUTwFheg/adFjW/Up5klJ096a+C92sqwDoKvJr\r\nbjlvAupl7WBjsi8a5hS1CSov18StRmvuTdjGRB0bhDi0Y59guJzdWOddy1T+\r\nIrXxPwm9jXTpsk7Kl04/JwM1PWD//ptcIWR+ZePzKWus/BRBHELHbMciXkzn\r\n+4y0cJEAyM2egCOTHUf+jhDQwl5UaPZ+vRiisxKrGAKtM4sg6zp2Qs+l6toB\r\nRhObhacVZEDhmhvvJs/0CcQoO30QpG1t7EbBvkBoVBmrgJ37qgevwXX9Hfsu\r\nhyGHeeV+fZ3qaYImctt2mBRVaGgzpXyTY9uOwJIYcz6a+yp+Iqrff0gLg7jZ\r\nHBdSoToNgHZyTh8T95BldIowMROui7hYK1FvpU2oHRXJ80egd1izQLnG1DvJ\r\norkVYV3iEBoJL6khADV+mj2HsQQUpG559acVtyXIOsEIAta5UCo6o2SNNHgS\r\nQQjywjOlTN06FZaoO/bdeAa7hrniy2bWmNd8v4z1Hc/yZ70nbc15k9PyB+Ix\r\nGrRyqR7h9zvY+4i9/9hhNorI7WZYGdOHEYw=\r\n=Pz8+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","gitHead":"092b20f3e93064c1db312062b76b420a7ed1703b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"2.0.5","@chakra-ui/hooks":"1.8.5","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.11.2"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.5.9_1646089630381_0.2578187556734921","host":"s3://npm-registry-packages"}},"0.0.0-dev-202221417325":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202221417325","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202221417325","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b29c35c85c0d366b4fbec328f62403cde68e7695","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202221417325.tgz","fileCount":22,"integrity":"sha512-gTTmzdnf975RgF+/71ID8V70i3ju4JwT351CBSlRx+wpX/ln6dkS4GeDPxS5EOkVekcWFAyI0nDWbUynFqHEQQ==","signatures":[{"sig":"MEQCIDX02uikozVt9CY7ubPSal+iBza4bxuFt7CKL6AikrHTAiArOGP9cmD/Vw0i3mN5RDFqNsOadOFsqzb3h81c9MOhwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL3WKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWHQ/+MpX3tZomxk8pdmtU2tS2CAhuHD/2eHwStc1bdaZ9AC93V2xk\r\nHHJ5P2U5ntGhbAsHz8/Sf8I86xxD4spn/Dmbvh07F/fgfAmWPv1juMfONsF2\r\nBYoL5eXPio++Qf+FyCSlqhC64XpiQyMs4L7rnnaR9uDQDIdjkvZ25MTjYAvg\r\nV0BhcU+NDg7gEAHadds0KpV+sNlDlguZs3+V1sdt4vSi3ZHCKrKXCgs15gn5\r\nwCFiNLTuOFIx/CclyAkH77GZW+tGfrHdqMh/iKijd0gU/zgiXNQUctSjIZPu\r\n/xljpHSKwcP0uvl0pdWjUQPOEXicV+FOW9wYgIlINJFfBYjXUIaHS+zDxhYS\r\n7gAdc9tKD1nGQoJltwlcnMuW3RdfxCYyUV0kR7XDWXReZNJBcEylGcssbMyb\r\n/Vcio+tS2fquNWamyK2V1Uoc+sFCRmmpBEYpR9yAsCdOcYwg6M+90XSJvvdF\r\n9r4AJAF7Huai2lQ05Dr9TQRDwWTm6CUukcNLdY34vLyn5ci1uBN5mInUkDuD\r\nMOJGcenslxF+UmpuD4oT8p7LGIKQxxQ/9uFglWttJpDPRn8KpOzWIesfADDf\r\n7SnCXnb0mCdDs0uly9IVo0p1SgnidJxbpImXkCN0Ns1RdrjuuMFqygo5xvPv\r\nbCCFoNOERuDfrB84BYnMY/M9OA6LuH0v9eg=\r\n=llCK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"4d93d5f9e46738c84958017bf70ceb6524f1ab92","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202221417325","@chakra-ui/hooks":"1.8.5","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202221417325"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202221417325"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202221417325_1647277450209_0.03222370461981661","host":"s3://npm-registry-packages"}},"0.0.0-dev-202221417436":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202221417436","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202221417436","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"59c79b9c7660a00ab929e42bf07d47977f4fcdd2","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202221417436.tgz","fileCount":22,"integrity":"sha512-MbeMro/+g1UbVmayAOV+wnDITH60+a06tdu10ttEuLm2gDNrGoE21Cypb+dWxGsxzez6Ln75d/1Mbpdgytgivw==","signatures":[{"sig":"MEYCIQDlXigUr4vr0UsCbe1ran4aQKrnQUh1Ao3RcGOQ6E561gIhAOh3+ifnNGfQzN7nU6iorojFHA6DKCuJ7wFOHZLE6HYC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL3XBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqxrg/8Crsn+kKl1UedjZciLsYQYt5jOenzzxMNFooBDBvR8uTyNKhh\r\noKhrahO91It8EgtCznGgkl9Qu28bNWjXB40XlNRcn79QgmjUlgOoc5yqxTcd\r\n4cp9AcRGpy+uFk0y59emqEZELF/+f2u3JhM5yAg7j656yYjrYxPKwu6nsoJx\r\nAn7+CWwANZUmAwtgL8zvVc20Z/bMBqC5Bfwi8BHXSxZBXG5fHcoaXFDzcBtX\r\neuQBRHpemij2FIHCDTXiyejMJzv6/rxfBdYIKvXIuaxqL9vB0OrBjod3WHMh\r\nOWnmw3nD2tkn9ZXvOqIr7H2gjDpYc7wH8uUtMETaR/e1G7YjFRTmCYS55iUz\r\nDrbAg7hUcQLcyUjVtkConLY2ey0u2mYse6eY+5OpiGLc/b3Wjs6wdzLcgB6h\r\n5fcsnzpB6QODv6ZinquK8+XJY8y2QJLKRFkBxodLyiDvQypm9k2GIUFYPnSn\r\n/g3H0h26V2afSithbR6xSbOma/vHm++o+b3z7x4QH6ZHx8FdwhXQ4fjhYBiX\r\nVN8XPPSdLgOwMFfP9/uKZPfVwjz961EnmGvkCfkfuFN+wuDKI0Bw2jpvQdS/\r\ng6APAR1Pt87gCbCZsVHqGiFWLY7s/BzrwairWEJhCYBa5DOgu6lchu4dlJpx\r\nAdX51IrecBbhWpGTOpn/66W/4ICeGBcDutY=\r\n=Bibo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"7d76107a2543c38e9a3c3ab516f581bc92174e4b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202221417436","@chakra-ui/hooks":"1.8.5","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202221417436"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202221417436"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202221417436_1647277505777_0.8698214514415101","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022214171014":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022214171014","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022214171014","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6b6cf8f959297d111a276b1797b37de4f5802a59","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022214171014.tgz","fileCount":22,"integrity":"sha512-3uzpHOHtIhZC8fLJWlPNoGTkYEEKMNYG8IsN8sfSQxWNCitQ9QqEjGr7WbFyF+5TSdtr52xe4MvDyIs2Uc5NOg==","signatures":[{"sig":"MEUCIQCfLAFhymNqOiACJcJPMkxH8KtHScafbt0ZGhjbDWx3rgIgC/0buGDRU4o8wynnU3ry/5l30LtVQm/cl7kN7UsDMd8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74611,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL3dAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6PQ//ZN2RIF909l7xSFWtYdLES5XzgNxeobi0KLQD1G1y+gFxTGxY\r\nYZmUKjmVGCluyOUPV4zTlBI0sFLfkIOfSLtdWgpUSnM0RVG93cL20ngnZ4rP\r\nuMmcXQ91j1HNb90d2EINKxE24Tgs61qXuiJQu+KuFxcaHZOI0KVP8ZFA8llx\r\nXuNpADaJcmGTGyyvDO0WOpqZRPzwB1SEkTBabP7OgQofEB9jjRvnAJ+CVRQA\r\n9PHWPuWKTbPWtCz1G8iKSU4jcAK1aqCWV+q+GYs+i7vteRRNpMk+xDw9jes3\r\nvUInSv4YzKfUFcbLGo6PKWpYJUHokQzyzNwYMkc4m+8HIlZGzC9nNB5oFUcD\r\nyk4QvM13BjyU95Zk+Kqq7wbgglQpfoGz9HXDsDb/u1xcY0dqYaWVd2K5oUU5\r\nVxZLxo7042lZCWJSz4Wpf2tqwhj/6KE53El1QxUfEylt+hiiDKaMidMGBb6D\r\n6XCTw8KbkWKIQKTcVkuI1fv2GtERgwKOYdjHwl7HdZHgog3FB82GOfP19M05\r\nK/u3klY2TH/R6nYjqtkgi8e7ttalIqBbTb6xTiqZqdK5CthgullqJ2ao8fTd\r\nTuaowwwT9hM3xucfWiJRsiNgJB8cHNYCAW8+JbObp6/TwjHKB8N+fVwEZedr\r\nJ69lLsA+3un5DXK7y/F0ruUvfpmBohf3ybg=\r\n=zqBx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"08e1db569f44dfa9f95dd149c5923594b49d0fdd","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022214171014","@chakra-ui/hooks":"1.8.5","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022214171014"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022214171014"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022214171014_1647277887928_0.6582858030092729","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022214195434":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022214195434","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022214195434","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"575d35392326b82a3100973c2ffb4691de716bc9","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022214195434.tgz","fileCount":22,"integrity":"sha512-XyTLjUFGbTaosJJBI+bngR4YbYw8+ajoofq/PJBQeTWoNJ4iv/aO23DZIgVZT7xod/PVGHXfL0JiXersFIyv3Q==","signatures":[{"sig":"MEYCIQDbJNUN8zAC3u45rJ46eZbouo3TiihYNIIBXeK152QnuQIhAL+DVGH1jIUGj7K2SqhaHVJd6sqgrF5ZcZ1HZgeSnRj1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74611,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL52YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq28A/+MuSjADrofqDWpDLm2kecjRSIUCKCYZbXyuZ+7wSqNlTyJgZr\r\nPo0Teg1fi0DLpcg5/3iOSwPJYRQXd6v8/I1mEllqQe2xdexVznyqp8v+FpAK\r\n7Iv58WR/M7EleZdsA5lgfVNgL2uCkDFyk21mJtF7DXbrZEumoL0WQdCgo8xU\r\ntp5oCDfRG0XeZyPO24SZXAlEUwlFi5tJA1tLRgPRX4Gz5JecJ3pqq/xXLgJU\r\nBVs9bo85eq4XuU/TGP1/tdgo3XOn59nBjYBXVe3etOfJs9fPbiCx6TQ0n/oZ\r\nLma6Dj83YnWP0IJO6dZOYBn4D8+v5yPAoaGWFC8rQ7M6mKW1UgSZnd8ToQqn\r\nNu6ZvDWr723zNNzpFSWnTZ7qM7QgqMQyDbXJZCG7irwteLgc3XJZ/5+GQfr8\r\njS91nwbw7AWNzzK9f8A7Zd8rqZoqcrM7Fonv7erCnpmg8wXKCGgBllaFE6c+\r\nyJ9zHgAz0xWW+VFyIdeoJcEcPnh1lsyC6v/BY5zrcwd6CWA+6ZQBrGfqqtKO\r\nJuxv0tMc4DtKrWTw3COPRh/P1CJcrsvZ9sCOfX3QZZOMqAm0ucQ82Bf4iWza\r\n3k757RuJEtvKZNpGoAIORuO96/FJD5Hc0H3ImPyUDkWI/I8PkR1yM7e3Mzru\r\nExBbGX3lFtkfR16tU9rMWfCfZ3uRO+HiGlM=\r\n=t4Tt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"1976d6516539f9b15b4c9a4a1cc0dbfdaa3a3f5e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022214195434","@chakra-ui/hooks":"1.8.5","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022214195434"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022214195434"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022214195434_1647287704233_0.08403912658194401","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022214195653":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022214195653","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022214195653","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b2a70c87c3b6163d3c298fd48ae39e7daeb8e047","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022214195653.tgz","fileCount":22,"integrity":"sha512-gcCVEVmCv0rjWWzTuXh/GWruRBfd5oF5zGBkgBLqMnjSQ1x4Tf9NUBG7oiNNeGyb+bDGJqxobuC5OeHGSafSpQ==","signatures":[{"sig":"MEUCIEbH4S9sV2Z6NLnW1VzUxeH/fyRc32wQuJEPKhIVtxhGAiEAmW9rl6jvyOrWNuEJv8faegBOjEjRMMqqhT63lhewWjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74611,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL54bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBhQ/+IHaL0boFRQANBBKDEBCqTkQMA2ItbK3/2yrUL7Dv6QPKYlpa\r\nlxNgQNjOwTWdHLj0JBeWZmX6GcpLnauoOXSfomMhfqIYnc/PgoSRph0lE3eD\r\nvc9ZMrLs26nF4D19/PNtS5unK9tOAFNF86FSfk4u2mQinDmaCOt+cbCXGYsh\r\nK3kLvfsYcTRb6xvlnyamdnz8oxZMC0/qhOKRo/dk0cQTCfO4HijZUVM8vrUv\r\nFsYSuBBXujEDDmvalRfNjgIt+9qw5nfAwIGnjtjYzE43SAK7feGNu4Fio4yc\r\nCjxzT5MTbntPdBROFM6Qx/aHHpDfV+zULMVTq/SCavJhSI0ksZZiaa758fIt\r\npq4lpMCCjrGIsLdPHjZmuA5Q8weaJbQWfestd7F1Yb61kbvBhPtZyTDJNDH6\r\nKur2e7zdToAY+TCquDC4ZRowyHM98/57YWqFBJeXjKhBO4HlHUWrF7Jtyz/w\r\nuE31p3lV0RFHZmJtntHE+7ip6ZqqTS0izjA7HF6C9/vV/By5oeZWPYl8+GwI\r\nxwYAvstvttrx5uuI6rrTAJqppk4FEgRckmW2ypR7tRgxbQBLC+3G9w/di7Sv\r\nSRXPLiftiUXwMsKOcy7uO2Hximb6yMhHgVI20WrgwEAasS7g8HOVsH5ASF+6\r\n/SApiAORREVB3CMUH93VTXnz2Rc99jOMYcU=\r\n=PUFX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"8c72cbe512448f11f63208a155bc665acbc79d5b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022214195653","@chakra-ui/hooks":"1.8.5","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022214195653"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022214195653"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022214195653_1647287835388_0.17232179026601302","host":"s3://npm-registry-packages"}},"0.0.0-dev-202221419595":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202221419595","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202221419595","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b050f81adfe54133832bbee52f8eb4b5e351f912","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202221419595.tgz","fileCount":22,"integrity":"sha512-H8uYf+OwH5RMCQi1Mon+VaKf7iLjt9BXbyzaM59Uz4I3k+s4yWywhSIrMxk5SZGsiQIekjabxLxxQtfOJiP2RQ==","signatures":[{"sig":"MEYCIQDAy5ZzXJzeeT4/bRCwjQmS2mBiwWLZtiFnIKxGf/ovaQIhAPwulIlhyzchsZEwBCHEPz/IoocKMxutk10+3Xjs0Ach","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL56nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr//w/8D24b/HZnhL+rZRnxMkJ+NY12AxySuIGB3/OfGsR7pfBTfeRD\r\ncrNAn37Fw7tBDWeqxWbAV1j+3XmiuJkQuid2fa7WLUhcNvF1Eksd/wEmEEZi\r\nDnbFu4dIoKZJitKHtr1Aa7d6OIRPhFWRkeHEjfaw/x3JT6U5l90P+hGGBXpK\r\n7GCtRH6w2faTzIFr8+6Lv0wl6HNMv8Vm6EiplvdSf44U2Q+Q8uaimRmYM8WD\r\nnos3CUTn0qrCP3WR/ige3QmSZF1fZE4Lx3TVd7GtEd54kr0VXlGuS4aOmwP7\r\ndcB85H0n2TCFzHedkHYNOoxojTxp5tw3OhXQNSF5esNHvbG3iJ+llacruZGu\r\nnN5HqXfrGsgWiyiWmid+/6WMc3Cr+9zEUDaERToRIjLz5Es50LXSXLDkl7Cs\r\n597RZQOo2YzJO+hSqoRGoan6poqt1jFVZg2Q4LTER+9K95AniA2nienjVes0\r\nhx1ZuPbNV7hu3xQsgq4+yPzv5X16GKQK7XGy3vLJzNoM8yBNtvmbm/Vk+BWa\r\nl34fGOBoVXf+IR6AIXA9Qk/jKmPJvSqWB1yUIJne+e1yOS6Gb8nprNMXW7B6\r\nMWvLviCJfKXHegCvQBsKRZu3VQwC5SEa8/sKSKC56JrAOfPqm4GNLudTqx4o\r\nGnY/1dzf4NEFhHdBgEDYOgWkyvOu3b9wNMU=\r\n=LIT/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"613baceb40ce59080488abc50f7e6e1a8df9de0e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202221419595","@chakra-ui/hooks":"1.8.5","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202221419595"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202221419595"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202221419595_1647287975459_0.7828694235576781","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022215181125":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022215181125","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022215181125","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"608e90741d69a7b1ca7f89e3a5effe0da266bc06","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022215181125.tgz","fileCount":22,"integrity":"sha512-rJF14ahAH87JgoxgbWHF6JJXhBfazqVaft7BoKfsoPixFc3NMhtJtyHaSwJxGIfPKPPJRDs/+7QNLpRrcTHGqA==","signatures":[{"sig":"MEYCIQDdafy+1SkgUCP5z7qXuini0Hi/WX61/8saVGs44Hde/wIhAPLsiAraDE0r96iOhMBUxzxmYIMWCPxxK1mxgD04oUho","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMNbqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrigQ/8CA8yzknpf+/R9cr+4ZE0Q5H0z7kuS1zJOSFgQuX73UNMapdH\r\nZ91cZYrzq2hcv/g7YNzPweB076CfCuy9+fNVJBN6bm1259BJtmX3P+AKNHY/\r\nWEbBVM4GwEN9n1NeMcq9RHPDdHuL4F2+4/p5AYbZ9E8jlLy6vkLcqLWDLsVS\r\ngi50ensjxjeA7+OwMKHw9tVW14TppLmEIyDl8fhWCCMZY8uBH1m/JoxHLZTv\r\nZFOpowAgmK0UC5sHm+s1vPN7OcMfgQRS0+W2yAALeziolie9BHnOPhVbsnVt\r\ndIRlmaESKDNbxx56YZ7cwXk8POe0dVyl/xpTNEF0GQyXqXQDvZpuxvcOsnyI\r\nIKixfJO2qz3vJezScetA94dNByQB1CtP80IVdTnU5W+pSt+eWwxWaosngDLU\r\nc8iP8aQv5dHrVWkkGzCg0/PiX8GtF0nFuLwJfvNjTlkJRPPN3y2NGn4pSp/H\r\nqSsL+/gWM1GB7gr54A72zhe4JgXzMFMh1nmNwR84wdCaX4fSovAHVzm69BAk\r\nuW4bfAEP7oR64DzaCMWOF6xCj7GwdwxFMTM50INjfE3mH9lCgZk9Kuhz4ACG\r\npCrAnAm4cDGU8b8j/s8EJ6LHdcgZmi58D7ZewI3S4kO3cCYudm9Gay4PDUc2\r\nNvc11SHVCkoLcK5gkP5oPXH9uCNH5MTFqf8=\r\n=ItLU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"73a06ae8ce1bee644e10f245edcf2f9f2b773964","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022215181125","@chakra-ui/hooks":"0.0.0-dev-2022215181125","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022215181125"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022215181125"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022215181125_1647367914789_0.7099195988569227","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022215182043":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022215182043","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022215182043","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"97855892a5fb203ef9a60efc19b4f33b686e0361","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022215182043.tgz","fileCount":22,"integrity":"sha512-1PddOn5OJH3HCilVQSfz2fWTVlxzrN/owMs5Ghg6Dvzhv1Ng9BuGvxmg34IjqYQewcKeZendwIPmVvy44dAing==","signatures":[{"sig":"MEUCIQC9KqW4zqdRPbh4lmwK/Y9CijM/mk43s1Hm6LncSFMBjQIgeJt8L3szwxQRuM3mXc+u4hbXgcU4BTnDyhGz1HlhV2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMNkiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoz/w/+NoDgGrLsBfY04USYup3JyCWq5T7dY9NTWd2z2O+aPVa6BRDW\r\n7kRPGjyzjBAyC3f4rwCT80INc5DTsEwvj+20Xe4Kt65Q77Uqm6mCrflhbNlw\r\nlr/NxHPh20ZSpuAiQ9zTMtTHsTOSd39z3k0wnafWMmyHwWPI8s8RbbI6ZLAq\r\nrA6oykaGYHWkbM7IKWpcJRqzU2dYMpQsUe+zbcj/XBG59wk2Guh6CbPVvhjH\r\nTvRGFJhM4zNeIReSpiZDRIRM0o9CzO03MqcXI9CbMl+EdrxJZd2up4CPqfnP\r\nDNcd8NobayFnlPIt2d0aFHgb5hJPtWUfNCNLoqFroUNqFjxmr9tEK0GV+til\r\nBnn+F38WcEbFDF3qSQ9on4djx6H+TBXAyg7bGPxY6FgWKBDchoHwcutokk7C\r\nz6poJMk2STK+kGQ0l8i0Kjpt13g52iHZ6se1DsNoK3Qf3gHg02UUA8T8kFx7\r\nQbMua9pyJKeqgxvio4kc6HBjOq3QR34F8sQTK6vdS1Yx7BmAAQ8yxj4qQKYU\r\nWjmTjIThqIQGi+3to5Za4MZPrMzXk3hXeAe5TTCgmf1BAjGq3Nq7SI+dYQMZ\r\nqBRa7tB4J+nkv7k78iaIVIFNg0IYNVH+OhLGrPWOrv54LsKbQa7M2a7/qbO3\r\n4WNHGfNPggLwmQBHz1dgHyh10VHpyjnJXDM=\r\n=ssmm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"232853068ab9ec95cd123ccf378b044ad7861ba1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022215182043","@chakra-ui/hooks":"0.0.0-dev-2022215182043","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022215182043"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022215182043"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022215182043_1647368482467_0.10427623305214762","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022215183938":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022215183938","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022215183938","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a9d463ab10252182466765b4fc88fd0a3a808abb","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022215183938.tgz","fileCount":22,"integrity":"sha512-BcKNgIjC3pPh7htq/ZUVB9YsIUe/pGa+C+dcOGbV7GGDZR5nABbRgm21Pl9/lDAGxU9TOKJA3JgI0DEN3FmyzQ==","signatures":[{"sig":"MEUCIBkw9mZ4FhpXpF4dhodEjeQ1rPLKERY8M1+UhXRF+t6eAiEA284EoE96pIkCEFGVgzMc/HkOwgze7RCnNEwozdM58FU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMN2TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXzw/+NKF4V9+bd/QjI66DEV7fu4IHtqxpMZeOKKgE5GYM0KGa4N/I\r\n/ayEFSjYDAXp2MZeijqLyybyhx79WTT3DbZRA4hVUdyWX13LPBGb77gff4s0\r\nFukTAvzehqfEcx9PMRkh45u0qvGk58VLBkIRpUPyXsOaOtnMAGEECBHne9Zv\r\nkGeMxN1RB2p6C4ghJSYNTD4afda9/TJLWvxNJMP8FTLBCl977Gilbn3rjDjn\r\nItVxbGCqxTdJisDjMAKDYjQbswDogzVvY0g3Naas0kOD/hU0v+oBzyCwWkQ2\r\nVFh4d+3noGHN/d0WvDlP9iEYq0p0ZiT+IjWu9n/5eJHIcZ++en6Di4WltL/M\r\ncTmpPsW5cQ5lIsTkjZ1RRHbqEWbpDQP9IS9L7RKzhmaKE3g8+WFD9RvRg5yU\r\nhKKp4ituM4HYByM2gQTTBmmL+WV9ivlmSbebD+iC4SkxWOXzgzVa67FNm9sD\r\nGWMrE4ijq7VeQU2BcFHMLimOrMy4pq6NM2NvU0FapLywpaH7RtG3UpvFqO6m\r\nInwfdRGb5YpwJXF0XgMMnHHv8zfYNW8D2GlMjwkBwbDXlEDy+62g3twlYnqA\r\nWySl2gSd0lVK3WD6FO3Q0a0JDrMo3SIzpzC5HgmFBQQNCNgCcBOV5STyhe0/\r\nE3tkCGIv7UvIHXNABBy6r5mqEggzrm0stmU=\r\n=dAY/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"6ec09741acd40eb1835cbf6d02bfae642413b6ef","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022215183938","@chakra-ui/hooks":"0.0.0-dev-2022215183938","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022215183938"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022215183938"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022215183938_1647369619824_0.5712475475254883","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022215184036":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022215184036","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022215184036","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"469047c8b899e8239b1c6d5230111edffb14bed7","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022215184036.tgz","fileCount":22,"integrity":"sha512-nDY56XVTly2D4NiYNRI5oMuATnjkhrQAkwSuX74GA1T2L9leI3e7equ7GVVdVFVNHur4zhNxQNxKdZTzq/hijw==","signatures":[{"sig":"MEUCIQCBvizbzN7ajJ3oe0TR+ZTQ5JBl2gSl2lMpEYV80tuP7gIgMhO0aqBU56gp4RmEFKSVfZg2W76yhuXCGkhrXmEYqsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMN3CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpV6Q//eOzk1r+AMHf+mLhlbS7hxcJZYL5Xi7g7SCpbm+4R/n9KwCtI\r\n7hlnNjpdq8M+xDG3sq9Z5WIDhneaENYLAChQpVzUfAce+ZfBimxWuqGeQThv\r\nUCnHfnzEB/vcqIR8meVaZsqUwqCl1JrmvR7I2sR1dhEOT81UTDZr/6ulg1Sk\r\n0hu/hqiJaLGvuk1iRRkyaexGnjijO87DiOEVybCkdC8G+Qu/DCq7VDqH6hLU\r\nDkJRTMA5NyiUSu1i9L7tZHNTOdo4c8iaBzEThBmWqLpVKB6PRxySPKTWLwsu\r\n1y+b3l3yaH0C5vuuNGJfYt6wrwJRkxvS0gUREfP7Pd6Ckx7GtvGnEnLLaMQh\r\nRqT2Iuw82hcpqIPsmHMcKcMfqP/b/ovcHPeb0MWPjOZkXZ7VybHNQLeGLs2I\r\nPTVeG66PN2K+tk2mkebzuXq01CPe2i8Sg3oPAAW+xaz1nvAl/iqI48stpBPS\r\nkEpec1tvOuRy7imeqRNfa9cVx0Jn2s2xR80RihVK1nLOXMVrN1Ny833BaUhe\r\nv2QbXdZxHNn/uvAXRB6WnHArmlCpxHSwPCT1Nlmkey0yv6BeHbl3EuB0hMMc\r\nI0X6earLQWKkef6bIQuYSwfqLe76nJSmEUGiSJp87iUZ/MObUXy8pltPHf6E\r\naMWdNofoRw9Xue0nYy9PbndVgydeLFk/E3k=\r\n=Fy/t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"8e201b9f84a914e58cdc9ee90b3e03269fabf4d7","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022215184036","@chakra-ui/hooks":"0.0.0-dev-2022215184036","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022215184036"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022215184036"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022215184036_1647369666177_0.17877123647522564","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022225182931":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022225182931","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022225182931","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0b6c17a025ddfe8a5159eae190a567f24b878b2f","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022225182931.tgz","fileCount":22,"integrity":"sha512-ziOHjsNR/jIOfJU86M4OVD7jbEpptOXqUTxSSa6hknLzsLTRm892uCIJBevAMDJAA5T8yRacycR5k9zgb4+nXw==","signatures":[{"sig":"MEUCIGc0xRbxy++Q8Vpn1zofrX5sKglUDmFsjUCZeikhyCe/AiEA0DFHPntRn/Kmjcz8dN0X3mLi+D9XG97v9SP/R4wQmww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPgomACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvpQ//QY+O9x/2Mw/YeB9s8p/RmBRqOU1/UBYLGUaHy8OrIlLLwQ8G\r\n76S0DlIVxRrL2IswPdmKN+YemUYixoGbsP457dKvnJiY7mFuwk9Lhxibo2bX\r\nRgTkrUsG3lZUv5UPJdg162qpS2cTdwv+tm7ITb6tATYbpvCxSpI6MdYpbYMU\r\n3yzKYdZyiq1OSFAlFzSYzF5jFC5MOhmfX6vGIeNzXbI6u7ZE1HhMvwbz1GCl\r\nWjlZoRMH+SIuqdbCudhvUx6Cb+ofyQSEqy6H2+uBBdwe62/ppg7iKOIxSWe/\r\no9N82rQ8G4RQeorY+yOKLaOoo/y6pm+6XTDQ70+mCBAmh3iC4hGVh9S1XRj0\r\nbNXIa2UEsum1McqLXpqkn2W/QPduNy7kP/FpX01X4ivEBlCoWJDHnD5ogQ10\r\nsKhxZ02mdqlnsJnk/1AAgoy6xyPOxT54XU0vKGQtilSV3AGM+xApqeVs//xc\r\nRhCxyfIvkUBDNU8cRxhMWQkhkPft/9z0IAc48s1/hCAgeOj6h2o32fVd3XJC\r\nM4D6eOn1FTK8nEI4IyyaOYLxw8OjP30wqd+Qbt33U9LgnXJZmz3ItmAbzAp4\r\nYQjaFpD5NRqpLjH8MjBQFgXm3AITOg4T2LlI0J3ZoqLTXVOaC3febtDTD4o2\r\nlrJzJaVWOs2qx/TWRUd3Mb27DveSaA7MCOo=\r\n=4Agg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e6fcf17304e1f6959407053b3037c9f2168c6ca4","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022225182931","@chakra-ui/hooks":"0.0.0-dev-2022225182931","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022225182931"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022225182931"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022225182931_1648232998729_0.18774665509777333","host":"s3://npm-registry-packages"}},"1.5.10":{"name":"@chakra-ui/form-control","version":"1.5.10","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.5.10","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0f6d3814eb995eab774ebd8096db34620619e7d1","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.10.tgz","fileCount":22,"integrity":"sha512-u64RtIuqUd7D0cRIuNvvi6+BQ1yls+IhcXmUlbTbn27bvBJcKgwxlFpKE26KonW77qHjguL1Sse2Mv5Gz/9akw==","signatures":[{"sig":"MEYCIQCNZyhwIb/IWw2nnXBNzrqwbWesXQDMI9sQAon46yU5awIhAMLVkxxaKHSgwzlj8b7BgefmpNAJsVZ/7jX8GxV8Hqo7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQEv1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFIQ//aMQJLUpsYl0fp+S1OQ8/boPiF7/2cOFvhBMQp6N3mI5gRrPq\r\nnXVBSv8RnRi1YS0SV2M6icyHnvLKsGCgBCswqRjeznwEAlhdjHkDJ40bHeCe\r\nYdvDnBEl61+iuWNiBlVBwriEMihrQyfeyv7bq41ykuLFgzfgcYjvd+S50b89\r\nw7aFYwlaYG6SzzMmnxRjYihjyIaU9VMzswnhDIAnoBZmYEVFQkWPKuRxlbES\r\nYMdD4t0JktsPxByEIhNwulSCkG8EqT3nTBbmeNeVMHRrpcrC48HTmXl8W419\r\no3guwrG19cY5T+ardk7xRfmUNsaqcnbo5Yp/7G5nv4qx/DHrn8jOJP57tZXN\r\nvjAh9Nvl4BQPEpuZJ/L87nlcM3WSuoZuvM7r0F08Tm6oWSFc/E0ZwOzyZRdi\r\nBv5CQLoHkoOihsqN2MNTZ16WbQ/zLXKemuN7UHA4kr0tG8LtfvMH54BJhH0y\r\n2vRZOhqCyGeKnl5vHWKAol7QLGAhKJASYw0OW58XPGbDIL517XLshysZfSNw\r\nQ6RA3OBseYgW8BVZ0x1gs2KilWV4fz8TQKP63Kb9FdcMlOWmL++m7gjQ+33W\r\nIf2CC97aJ6eVZPWf/WKneY6p8X5VWD7ZjIBoocw4mew/qqkFlFefuZjU6Gw1\r\nRH3JZaik1surFHOq4zuAyesGOpmUWhXItD4=\r\n=WApi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","gitHead":"bab4f2f2cddc5d4ff073b71ef72537fb754d3643","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"2.0.5","@chakra-ui/hooks":"1.9.0","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.12.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.5.10_1648380917152_0.35023971407895216","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022228155140":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022228155140","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022228155140","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6d77e6253604fe18039138dddb9c7c5699d54390","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022228155140.tgz","fileCount":22,"integrity":"sha512-p34x3UpBGewCYmLEDRbrobsr1hX6eYxGt9McXuiB5vwy1Gv3NbUq8vXesquWYc8g57WitBHgHcFEe6WcFsT0rQ==","signatures":[{"sig":"MEYCIQDOqiHRJrTOHl58poZrPZ8dmXecPs9VMdglbeQ9vuIoigIhAJh2dlGUyqnhetYN+OBkCNRV8/Ja3kcT8KF9+gnoE4is","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQdmuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjQA/+OFxoV3wJ+v6irNoMMYowqp8csjGm3EdEiE9ILCBLrTLQQrYO\r\nmMZeGzbAr/p/Jtbk5t4eG5jlncImGOZuuyZyrXqTl+Yl6VkgXInbWJuU54yN\r\nFnaOLEYzP9vAxBu+R4oHsEaVLzRiop1Gn/MUSD70IgtA27ZH2R5PT+uzOeaz\r\nxR20uVZX735aVV+wOK0pDXqFLCi6TssRH6jhqt6FLCHoMKESgp5MgR8UFhS2\r\nDYf6aVZSnGgKaFTf1GvOMZw3VhTy+DzZJ8TmVnQxwsm+nQofGZJI10KMRSzw\r\nG85IUUbN4Kk6UO1d8SJLQhzTg4TxlBZevULC7Qywo+F1e/wKBOVarQZLuPjp\r\n2HqoqD/n/NTuotkZ2tJFqQ+qQljlH0/EqDbMIrl8vaHOOOeYQy3ndBXGahi0\r\nk6I3zP6qStQCvkAsEY5pvGmZ1KNvX1omMNJ3brGLyYmX2j3w7j2SkqNtJqbI\r\nz0jjy52hO6X2f0v1e1P0eAtzbC0HQyp+gPG5xgNntwxCHBu1tf0Y+O/tA/gJ\r\nUEjbBLaw5dZSCbD6dwAomXJGsdgS1N5opVFRJR+RF+4d6vY5x91X/LOe9GnT\r\nt/A/6gSgkxjn9t+OsWT8Vk6/220dxiWoALY9jGve7atZvlMHYGMuWFgXGlBY\r\n+rAhDrIVERxwVR8WrDmyRJ9MBs7pCJ6nVC4=\r\n=BMJa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"7fc8742394fcd2de80d5b17e8325b148b1ed37b7","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022228155140","@chakra-ui/hooks":"0.0.0-dev-2022228155140","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022228155140"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022228155140"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022228155140_1648482734322_0.926611822813318","host":"s3://npm-registry-packages"}},"0.0.0-dev-20223215463":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20223215463","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20223215463","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2fcf0f22d547b7ecf7da0aed8d7712aaab74e2a3","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20223215463.tgz","fileCount":22,"integrity":"sha512-+//OqoOxfeO2oBViWKp328DqnFuHEjG7dPO0f2QRqzuI+vp5+YzTuuqTehfdFFAWbV6ZOtPFNDTJMWECJ8HrEw==","signatures":[{"sig":"MEUCIQCsY5ynEqW4xGcFml7kbaOv/wi6Rkun+1gaFgU6CKdC2wIgGt0b6UwkKVQIAWb51Rpg9EI3tG6AT2dQCt01Jan6zoE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSG/WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUjRAAiBgt6LIaZkBdBgCZXc4Q5D4joeMojpmLcR6BLHT3Pu9kKv/l\r\nwyk9xo9ie3ee9MarPr12VzXOVGS8p7yXGuCu4ZdTjEDP6p7q1XZZ48wxvjyW\r\nT7+2YRFgxQsXbv844qH/kbfaGe3rAeVj0A/33DJKc0uRodxxWMwo2XCDyc6j\r\nQeCqajHIj7GRDSLt/bMx7nOYKtog02xKKIAdy/rpYWvmQdwzbybzyvbTG64v\r\nEzYiG1Oa83h7QKYtW+Wd6KeIfCAj5ffMP9fU2Sp6w+Vg8sMsoP4k1zAx7x36\r\nxmJ4IGnJH6u/iXEai8BX7TRuy3cQ4tlLemVIoBnWR4ujbQA53C11HbvZjBPk\r\ntxU0l7yeRx4auLId3cN2+Sv0kE6Ak8UplwA3vEyQDXPfoGJsZNpd8Idyol0b\r\nM0evzSdp2dN+6KKSawG3ivi+FuKj+EExb1s6vsgoMVV+mFeirlIXagvdh2Xe\r\nV3lXyoKqNC+7G4Y15lAZZ353l2HCXHHV+rnRYwWwfx0FFsCizbYYkVC5QVUa\r\nDS482Wqt6hcf6UeMLD+Hmzoh2PQ/JulbL+NWsfUSs2LQ7Ib9jQdbvVPN+pKz\r\nYgXUJ8sEOpcd72UaFyyEdbgSrLoEJfl+VnWN0AvtfzQVpMbwc1fgAxbMeN24\r\nEGaY+4f7KDgj3z+Q3hr/dFnMNP53pohIB24=\r\n=EKZ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"82a98db6e9dde5cdfb1abbcc6e7f4c5a09ef4f9d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.3.1","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20223215463","@chakra-ui/hooks":"0.0.0-dev-20223215463","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20223215463"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20223215463"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20223215463_1648914390632_0.7643162125717222","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022349032":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022349032","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022349032","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1930657599d7cfb28e39e7d6673b386a14a30ed9","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022349032.tgz","fileCount":22,"integrity":"sha512-PFwjxwluACdTr1LWEnSBDxlag/yO7yHr75yH9Jx3vRuOhcYi0UWLn0BqSd6/yqfXW7CCWn7D0cSMyad4+kgYjg==","signatures":[{"sig":"MEYCIQD4DP9wZ0BFVp65BNVXa2KQdbi05XK7PqCqo2OcmAmvxQIhANwiR06sqmHj0nBaUBXTpEefp5qFEvuTGGVkPm2ETXJe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSrPTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAYg/+OVLYNJzjrfAIR8kryoNrj39mMRje95g5D2HdMp4ofxAPOp1m\r\njTK7ctB7n8yCfl1JiXcySZgQivrGWE2aupke4H18qDBIrSGR1OpVwk370V9/\r\ntpdGHrxPRLK1m/gMNVfdvDnUntHPsOqjuGaNHXyrH57+LCuxU6oZXN1ksEk1\r\n/z+hWZnwi6d036un6aoE6PRK7q3Lmn0Sp/WzylQn2WQmD246IMQeApvnjiyt\r\n/FX868KcQJG23CUzG61oo+/g3St5LVGG0U+sxN9w34cJktRxmf0NyDnH49DM\r\ncL9P2JYVZvJOUiv2yYoVtnek9Bb/w0SYA1DqQgGJ06tyYjGkJneahiu6BK2R\r\n5hOmi9I4LRvFu/fQaKCPUIys0t7F++/+YqdwmcYjkZ4fVxzLG23giC59NO3H\r\n+WOfQf4PG51/qa8Ed2MGZZFRL6nx67yEIo70cxnBFoDmJNZYr0GJiE4hM8o8\r\nCG7KDWbQKRx33Dg/iaSDlBDsy8Rxty5K7QghRfhv0iEjrcPytDePrGL8SWLs\r\ndYg8dNIGZiM3fyd4iXND/1iyODE4/o6jpee2T8fZ8K0FgDRvilSc1wXi25fl\r\nnVRvGaBRMwdT1DgifVpVpE1V39KfFDjPaST4kLjBBKgiqBU1+YXqi5phKrw2\r\ntsZwfDopKociCqEtyC/6sZJi0ifvt+z19yw=\r\n=8dJ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"59e5b1b6f0b3e7f412c890485615af9a57765cba","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022349032","@chakra-ui/hooks":"0.0.0-dev-2022349032","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022349032"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022349032"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022349032_1649062867767_0.07933849939656046","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022349233":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022349233","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022349233","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"92b8aa4f3ac45fe2ce5b7ca9a08562cb4ff1b6b6","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022349233.tgz","fileCount":22,"integrity":"sha512-tdrLVu82GJ7qXlYdWjvz0luEDfutqlV0gR9T6hROSkNJCdzrQwMRkUii7QO9dQu/YFtI43VPWlu9ORmlGA3NeA==","signatures":[{"sig":"MEUCIQDquMUkCakTikTws8CxRMmPO4NQlJtjPrG/ZR/DHnv//AIgTpV1N5C4Aj2A8AtPUnCC7xSkFPECYrQs3CByuS0ZriA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSrRMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo33g/9HNtjn1qKoC5cYck3u50IFPa7kfkfGFc80R0AjyoGBRIZ6nTt\r\nLdrmWVSjKPtjznQ5dAemWqEORhzf1KW1bw4s1hoy9z8/cMokuHsYwKn9uUAi\r\nvwdb/WapGINjTRIbDF/ZwTlOy4IwPxgno39a7WEB2k+Fafz/WLNkZ7icc+DF\r\nfB1o0cBrHsR1vHezIiI+u3GC+IUs6p9CO8BYbt0wDkQONh++MpZo6PHf4luZ\r\nj+B+iVY33kJft0c8iT4X1PuDgHsM480rfOp/vSwco8P0Rn4TCXceE5orKd4Y\r\ntBitnV3SUhIBmM9mkJCH3aoPsiva+WuHEODisx3Jrtv8eRzlp4igR6ihDV2u\r\n0bD4QvvFscO6BWhSWDstOrI773Gpb798JO/HDkH216sucbt1/w/5uFrrI9Bm\r\n88HHzdbmRy5524Fjrp8cFH25YnCDTzrcP4TnT6ChJNUIw+P1myjofV/Crf9f\r\n1EZfd7kzzd+lT97iaTMWtz9WubqApXiODAAZ3gdOKHBHZGj5XJHyIb5rN+le\r\nUthbaSUEzD+6kYbDfqxabWh1N8v1mpUqTjm4THO2eiLgZrBZcKCvJTD9f2eL\r\nbw9LVT17C1yzlf21XFouh3CCcPAfnHIhP/hxpWpAm9BDRngFleLEce8sbEz0\r\niIdZ/BQFnj+VDblMCxKXIazwk8Td/rODJcg=\r\n=lco6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"bb5de826e868abd7602b761d42d9d4842072ebc8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022349233","@chakra-ui/hooks":"0.0.0-dev-2022349233","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022349233"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022349233"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022349233_1649062987880_0.932561610780416","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022349957":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022349957","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022349957","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"de0996c63b3cee005a6110c6b26e46fcfe93c66a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022349957.tgz","fileCount":22,"integrity":"sha512-we8HyfzjzMZ6O4+nIKvuuJi7YFSr+I4rGUvKgRXgp+9sPTehNaLNvT1P8G+1lVPuHbNbdDzOOimpU2ki3byxWA==","signatures":[{"sig":"MEUCIQCV931AJwAjGSEmy0OZBZ9R4JniY6BZD5RD0Rkf707JPQIgR5H+VbWJXQSWd9epgbYDoAFwOmb8VyhfMvq+aVqk6kI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSrX/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMiw//Xv5bT+AN0cxkxoLA8WP7sJclRwGRhBv8HR+j6O2qy3ISwe0S\r\niZecxEZKpsAhwHiS/DvAdc6UySRPXqOJ0xgBsntSzPqB1ANdQMsNmfsXX87Q\r\neacv5Isp/0KoYJH1HsPADkHXUms003BHf/+6qHXisMqkqltHCNcPT8oBn8Kj\r\nmScfvux/GL4qW5Mgwk7rwWy/dFDQ7MSAZbmNp8kD9UtpmWQm2/HdHyKKm2ps\r\n7XjwPLUWtfm/qo5hoHPS5RmYENIL//ZQjuOk/wY80w0HL+coU5VBGgUAzmha\r\n55Vl5Zl0Od6KZ6mquv8cr77jNHw2QTnwCBHk4LSX9i2E2BlQH3DUfCNPPMvy\r\nDGYE4acpniK7O7cGADAcsXTV2M/GHoqg2vxTvR9xb1yyzc86yw9xMd1stTgR\r\nx535zs67QTw6yXBfg/UcWXeyC9qmC8Id7Ji/bWAeuuY2hfF0dNhI6gXY7D8h\r\nk1J0z3sYDcDW4a4kmquFdzt5F99vxls9/K+JbN8MY1N3OcwqqfmjwBbBPEgS\r\nXWiwTahVuLO9tUp9qV80F2jJdOr8EfdoTlQE0p/5pkFRtC3SWaTVuOwk4NRr\r\n+ct+uTYw//qmh8luKUBqoFzB9+puXJaTYdtG/iWhX+le7KPlqV4Sue7DzO2f\r\njBbbJkWvxaR7klwIEGYcASCbDyYaFebniKI=\r\n=yiQI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b675d1794da212e0b7b9c98cd275436c299fea56","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022349957","@chakra-ui/hooks":"0.0.0-dev-2022349957","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022349957"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022349957"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022349957_1649063423493_0.9730354850543164","host":"s3://npm-registry-packages"}},"0.0.0-dev-20223491859":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20223491859","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20223491859","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"07fb8f6ff70c47c9e14b4ae610455b97b23a6a59","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20223491859.tgz","fileCount":22,"integrity":"sha512-V+dQSDS5ubRFRX2rGZanjkatI05Eixh0za++aX8GMDGO++FrLxF+8rczMnjVB+lFzbBzeSBS7fJQRcfOl427pw==","signatures":[{"sig":"MEQCIFPVx8NGSuWVhm2Ap38V5dA/cVdzHF9Cku+B2MPUBRsgAiAZgtGJl+MOvoHlw4fAxfI5DaWXF5DruvqueXT0TTN/rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSrglACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOOQ/6Az0aleNDNiEjXbgG50eMsdw5er1M0xbi4tOpWv4wsIWeuG4u\r\nkP5KiGYh359XFa4Ybx8Q5ormbeOHxJ2WXvP9tGwKursMorI2NKaQEfFUtHLC\r\n4cEOopnb/j1HLp2Mho9wH4hbHxNexu/rvZpYPtUj9VVuDl+GafFJLn/AqJHi\r\nBb8O1o+IcpueTRkwXbPaA4UtcOPe5Sd9xfU1AA/OOrWL8kforQMEhzlghiiF\r\nAgajstQnryQDDzEXzEJF9gFccTP/NlSNX35jYV8K101Lp44G+Hm3i2cRm8Un\r\n1je8RH7TuBk4AmvN37QOdc9MILUqJCmfly4BzmJ5qqeO+ECTqxhJMC2Ay8yL\r\nsSIuBAzTJjFFfVyAZhZZBEaTJS30aKtHVloV4D4qgh2gfZ6zXdL7KZYFY82O\r\nIfG0A09tKTLZG1ty4QAY00NOz6+ppTFHjdEKQuCMWbh+90bxnqnnji1NhOnT\r\nRBt8F7xTF4MKmNsotKkwViwA9Qy/vjVS0upPDWdGQHKeyc+j7cFsoYmY55c+\r\nwC5qayLH7Lc4GLXNzagGU0YhLXpYZOYFI6AOXOa5YinryBRntNjgWyg7zZjK\r\nFweEBx8vuUnoO6NbV0LoCGG6u3MtdVkAGTYTcOEsS4skAfAT/q37J2CQrnJ8\r\npnZhc+nuuFRQANwSBgwZ7Lopg6QgNi9mCz0=\r\n=8fUh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"3c59f6d762384c91681999ad247ec202255afdaa","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20223491859","@chakra-ui/hooks":"0.0.0-dev-20223491859","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20223491859"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20223491859"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20223491859_1649063973100_0.4787160906357084","host":"s3://npm-registry-packages"}},"0.0.0-dev-20223655213":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20223655213","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20223655213","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0b6b0de59fe3a58531270239a7c03f2e1d645af1","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20223655213.tgz","fileCount":22,"integrity":"sha512-DtbU+UDx7iqmX57/kHa5qURo/NbpEdl50DRvd48XpfeqFwrccNmezy5Eq7baAd0l5bmVrCz2faiRbQTjm2DnyA==","signatures":[{"sig":"MEYCIQDMgI8yYsM2GOSSwF9sMRwrelqYqs/ofaOlUKAdUKgXrgIhAN9AeWnKCxDazomKKl8mUK/gz59Wq7oRqYIdq/iRJDo3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTSqqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpN+A/9EHXmjgk30LH3ygRVT2ZXCpVTHj+Jb/1aFAKrKMNiVjedBa0H\r\nYIxDhkZy/PmokUWmKvD6yDJgrtELtFTbMwFMxz7Dkm3rpqppAWo0511iX0Oa\r\n4us486+3NT0qdBXxs5nsSLkwVW+rddPHPx3+orywDjc9cCzNjHWg0jyYXSdM\r\nCDtighyu77daepc4GN+aMFIlL903H/I6c3Z0QbPUHyBXARrSgds/+OCYzcI5\r\n6kQNIpAqRojnPuY8JSchWhEthWEdfGIdirtT7MNjFUiX+r9e5e46InFUCmGl\r\nhoAA1LO+SD4h6/JfeZJ1pDf9GpYA/IBEq8BvB4/WAuxIY6xDC3AhcqPd1QVr\r\nS6s7mOJTaos7pnkm99nrlJyVRjBO2SGtv9e48NlClFh61lxCTbwYo72b4MBW\r\nlqjY0I+7/QuwT8q7ZGUPD2YCOT/wYKSM0aFHpVBB1srbydSpiqoHyMkeX2/E\r\nL2G6zINyIpKNfmorGYzq0hnNjLqR8OxBwUWqCc0wn2GYI3aFexP42dgbCs5v\r\nBLOULYNnz6x7hCz9GhkCm6Pq2NR3C/jCcXYefqfAIN8OzpjBheqO0AdfZjiZ\r\nQXGZ6QSUx7Ky5OF/hxpf5vAFZxyM2QuUiSEZLbLhyIUdOIQgYI7kBq5L5E+r\r\n5iETQgMrpCZlvCIOXT7tnGob2ZcSOKFPj9E=\r\n=o6da\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"fda65880e6bc8182622e73048e9ab5b3722aad11","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20223655213","@chakra-ui/hooks":"0.0.0-dev-20223655213","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20223655213"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20223655213"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20223655213_1649224362116_0.7099644670592515","host":"s3://npm-registry-packages"}},"0.0.0-dev-202236131344":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202236131344","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202236131344","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"65a597eec33ace7c8eedd869fb378928af92007e","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202236131344.tgz","fileCount":22,"integrity":"sha512-4aYDul5qvfEmyytAfFLwe5l7K73gkptTgnf7YNUqZ9yUqYWrvEpohtNCKmjb2siaVVMuyMeCUR6aFT5yJv8jlQ==","signatures":[{"sig":"MEUCIASJMWtvpyrbY8iUcWENjid4y7+pViAqKXG/gJyQ096qAiEAvcRMvMCiPHdc7SnWFZnUtzhO/3CXE/rW5JBtggmtJ2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTZIqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5mQ//c2tPgWvu2F/rzLjxOMsbL+/TMLaUWTmT8RNkqrNv4Osl9LJz\r\no2i4V4W/PW7HRRnl6jI7jphTguzC7dJdKrXKrN8WYA8g4YgJOYo1cMoagA3+\r\nP8jVfBRvEzTsYcWuvW+iyZ24hA+4p4NPdHiVuR2Q5yZc0IgAcN1Jr4iHOwQA\r\nVOQu732a97jVFOcqk8DsxiA/FfnOZIec2O+xtNv1DUhCjSDO+HIvP+ivkBD2\r\n1Qy+LcI7n09odkCsFBJKAeEfdvQDXAhrvrI6nkrpsryg5wYwwLAykhSPaaXo\r\nQ2ROENUVi4cmL6mD04axg3N+qaGHSjCZlqDYH6WZd0CQuzp8Qyvpa9kYYcaX\r\n666142VvzhhAx/U9htFLy7Ff0HYTLpR/8jr6/ZKZuoaYLs6qhNY+Q95mFUsw\r\nbkVWqwlCEd3Ea7e/ja6DKaOtdT+uRNcE8q5eu+9ayQfy7OzxKQvlGRCR9uI+\r\n2TY9QhGXMnQTIFba+GqV+eaYXHAhmjcaKi7c1saBxBNdRCku6JIPQFM/TY0l\r\nmwhv4KRKixkr8USiLgnhFxXvjGMqtXgrG8N3tOc85JczU0G1Jq9RV4fMIE95\r\nFCGDebL/OqVxG+6wWglM6+kMg8DPNCRaG5tFympHRQZjMYjvq/at4vpg1UMc\r\nbq1dl+c4UVtLG8MVMiI7OYnZe/fDXvtf2aE=\r\n=KBl1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"5c3f6cc51ee18b653832d0401687f4bf6d180d3a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202236131344","@chakra-ui/hooks":"0.0.0-dev-202236131344","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202236131344"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202236131344"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202236131344_1649250858186_0.41838344277256434","host":"s3://npm-registry-packages"}},"0.0.0-dev-202236132312":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202236132312","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202236132312","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6b706fbc7a848170f2d7255c75352d1a3bade74e","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202236132312.tgz","fileCount":22,"integrity":"sha512-T1L29rZZMamQXZNLn5BaN/VmZctuQb4iBqNOGzHP8YyQD2mQu2f/py8zSUPqzdFd3mfp2rafEhyQ83mmw8aaXA==","signatures":[{"sig":"MEYCIQDrG8hqGz7B4sOhHNlXdw3AoDXUVzyce2tBJkJielghzQIhALX9yhhm3AmVXiCPBbqintSdO9vSEzp3XA8R7bnyQXMO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTZRbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrfkw//b52OCv1nUOEv2T443DMHZYW0fEUF5Qw/bKdCOQI3eCtEFiY4\r\n3o/6MfJudeg56RR2pUMUOrZ8TwK92wnlaJt3DDnJEvlVx0Ac4ShEuFoDCCIF\r\nhQ3qNH25hFin2ewg9PHMVc8h+FAkV4sDaSjAmMb4k0DBsIrfB6BAoOZI2RTL\r\nHErBq+PDgnXyziFNT9393XWKPiVJVVNMweNTziGo+O63YReEW/6Do0Tgt7qy\r\nopmyuwqte8VS8XzEJI6mOQNuHtrse6uhzEwE3LR84xOwd8yCHsAXnwU5DpZV\r\ntwg3NRXW2YMqnaK6PIXHcWx6jlhr6f3ERVLbKCixbNbPCZcfemf+GF5bDVvW\r\nDKPa9jzAB0ZGB/03KgqYuHVfQ3v+Mo4ZBrJia8MYBt/POSOeBT/YIMXYxe6S\r\nlzqfcy23k2jYQOvuN1BWJMXgk/n11XdG3BFiRCEBK5lCRIFGa2/3vMVAlEIH\r\nrvdYlvAwZrfS798IBe52qAmYVkyCmGclX2bGs6CgrLpWxzS0LbWlEvWujwMT\r\n4P3rxULQ+0huOtbUlyszPTxBjZsz733mQ52fNN/EpBA5nLcjtclWVDwnFb5U\r\nG2h978JKkp0Rp8BXVaydWoBYKVuYtI+oeZmr8pC+eJA8PfHZ6XxwT4CFuc8Q\r\nwkixt/eCQ+XQNWQ4Y8MGGpdPx+sOf/TiGT4=\r\n=NFIZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"2d169b1afa4a5d0be13f975518ee5e286b485d1b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202236132312","@chakra-ui/hooks":"0.0.0-dev-202236132312","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202236132312"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202236132312"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202236132312_1649251419348_0.5216811186267798","host":"s3://npm-registry-packages"}},"0.0.0-dev-20223614103":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20223614103","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20223614103","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e7a9666c9a73bd451612688b63d61eea3031b753","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20223614103.tgz","fileCount":22,"integrity":"sha512-gPeoIaMMUJ8kHovdN+vD63j8m0qnUFBZYBsBEk6PgOhx6sj0ivJak2cJPUr+WY0IHq6gcyg5DNbsro61sIaDXA==","signatures":[{"sig":"MEUCIQDk/NWU1G30IFD6mdzD8V8WSfrp0jJZ/EqFmZVOpIL6sgIgdHWbh2GIu6YUNSb0Oja2e5AFPVzUE0rHefrCOzZ+MpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTZ9ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSdQ//a13oaNBZufAXimftzKFHUkA/a/j5Rjdjl87lWoWn+BzxKbTy\r\nech5J8e8KeTQEi5uw3RUYDizcpo2TUwX0CSrM6cJM51Pue8qWpqpx4Xn36Py\r\ndh+9hpFxjsIsTtQhSwxOhBqLNT99UeD2AaB8T+W0C2EfrjyhyX1UPbEqps8k\r\nqUID8VvK3aESpGxHArq91igOuDnUMK6uI+8v1yH9iFe/teo29l8eyL5elUru\r\nc4pWElOko8ILcr2NN3N3QaRNIHisj7+42Ne4EdQRU4nBv4g4O7tq1pNItXOW\r\nJAqcdCosF4auVj1YhlV8lLtYn887xV7K1DdXaiTs2qZjZ0uC7d9w2Y8eOBiB\r\n54Mdv+9xXaM7ENGMv6d14TLBdKzKlmOhBCwmYR99PB1u41crbp7cmn5uoAAQ\r\nWDNZaiIEgCAujIe0wssmzR58isV7YXbfZkv8vARaifs9yOfoTH1oDiA+P6/R\r\nz/n/YDZ5CDU52oC8ispDQPNnRl9Lh8EjTO9x22+n2TBifIlLVtZvmmNumZZn\r\ncg7l5R5oSHQbQ1l/LkRS8Cu+GVmsnFXSYVPEFUL4UBagUsawa9YX2UA9cAXx\r\nNHnP9LoWCc05l5nfQDmNUQqli1KUxkZ/uCRRFb4Q4biR1HHdSAd7StE308gs\r\nF+kehHBVM9C808sMHTxwIroKyUc0x46HK74=\r\n=2iQQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"733fdb4b1af9722336a17cfbdfd906763eee823e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20223614103","@chakra-ui/hooks":"0.0.0-dev-20223614103","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20223614103"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20223614103"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20223614103_1649254233573_0.9748461616658193","host":"s3://npm-registry-packages"}},"0.0.0-dev-202236141416":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202236141416","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202236141416","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3a5fed1bf7648051723cc12d932590dde333b5d2","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202236141416.tgz","fileCount":22,"integrity":"sha512-7LgsFrBYrd9FfTJpPC2h7xI7AMZ9UbXJXfE9t7RGZGyJZsXwv4kk/g0+w8uNFjtPXDsdc0BEvNLMq081FQocnA==","signatures":[{"sig":"MEYCIQCrspFPLY1WPktVDJ4uWzFUTEbS/HVyXnG8jmjjQnpTPAIhAOMi0i5sFlz1tt0hXCTowqQLSw/RmJmzfn6zSsCW/q5X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTaBUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowiQ/+Py8n8lnMT+UZ0RV6Kdm3hle7MArHX5auC9bnZM53XXJiVuii\r\nvtP1oWhEu9mtp0pZeFckVRU8/os9F+hF1ntXHSf2lCODbOmpdtvtlUpkIEu8\r\ndaWhnaJy4mJdWnCV6fGIP/HjwZ4YI0osqDx1okUF7qSTtQy4IqfRkIxboc6g\r\nP0D+8DmTpqSJGIuvmQHc2jHMhJEdJHqKv9UENFw2aWf0Mz2xPs+QWiDfhxNV\r\nr1+Q+Vi1OSM0BS5f013iYqXecmFB/M6BAzRPWo0T1ZQmjXAB3s2TY7moyQO9\r\nzcw6aA35JXKzlc2SlnFIscTmUssJRJArMdgSQZhMMUv/lQ7944EPSJzcRRcl\r\ncjeyDXr1C6bmPqlCEfuUQdtaQW7i4HrrvzKY7uSq94ST3gYRRLkSUOePgnG3\r\nf7L2DQVQdGR1NOfirwIgISZ4Tf9A5z7V8iFWjGcDPrhy032RBVERo851ARIS\r\nDVTSc9XGHe1GhY5cZ7jaRPV+Z2uNy0dr1klNa2AmcLf6lInX/Ff7QMAG/Esp\r\nrr7YsNl5E3lyBwbfNwvt7wC11zO/dE1GYHP19h5m1REBztCld5L97z8fy7GF\r\nX1bqeqTh6GAiL7AZmBQhBY92gbdSELfvZCjYSmmj585js5j++yn1fjINTEHh\r\nggUPP4EO4ajZrxKsoWND26kZ5jPwDPfOvXc=\r\n=YUMU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"d7a0761a4d3f34896b32985aa1caceb55473e992","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202236141416","@chakra-ui/hooks":"0.0.0-dev-202236141416","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202236141416"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202236141416"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202236141416_1649254484405_0.9506313889230416","host":"s3://npm-registry-packages"}},"1.6.0":{"name":"@chakra-ui/form-control","version":"1.6.0","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@1.6.0","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a2a7b82a385f75fababf3947d39e227b4d073929","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.6.0.tgz","fileCount":22,"integrity":"sha512-MtUE98aocP2QTgvyyJ/ABuG33mhT3Ox56phKreG3HzbUKByMwrbQSm1QcAgyYdqSZ9eKB2tXx+qgGNh+avAfDA==","signatures":[{"sig":"MEYCIQCRHSFHvAICrlzVtWObUGPdCub0EYSoK+YPgZa9nAlffgIhAM6RX70hoCFVjnZrt+jrP7hCgd5jkiL0nBrNOxyr1024","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTwSEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0eRAAiBaXEQRfj1us9pBLohwHJU2BSsoyDHB66jXbegARgjoDayQJ\r\nt98GMIJ1ZgUSbzo6+RbE7EXa1O594kcaTIk+lDEQ+Qa9rsQAzwefzaYr6E5P\r\nVfW666j1LJfRursf1QsQniNjc/Bb5Ithbm23eigssGk2j1Ow8XYoeliOc2Pt\r\n7gRKB+wDTdml8UpBa1Gx1dGAixpDDmXjJGSDmdRR4lbt/X+QCp1IwLNID4oy\r\niiM+i9ZK52QCvZV/nkl9OdDaKB0HQh8g9LZAEvYufLNEDAUTWyUk85OMm+KY\r\nJQZ04IrQeovQ8RINlXvnwESHQ/iPAzHIpw5YW0BeEzg1bdQLRGbJGm4qQ3gm\r\nuQmrlzMqY1RJ5Bguec7ICNQlBn8SAkkrl4Et7N1WwQKcCm24utpcwkZ7kIyc\r\n2FdwuHNHM2bFqjpwi0He1MDmStMnSol1Z6lqxdrXrdmdzvob5dIrtVtb2/KB\r\nLjOQEjeAbBxdN7PeYCYlOAM7JzQG0f/p5o2CBPgpqdmpkCS8DcjSbHlBA8vm\r\nfAkgEABdC6Y0ANHwp29lI2Hg1rI0Pqa486tA84Wlak/6+L5Ip3vJsegjpPJk\r\nENpeHwrYur7pU5h1Pd9JXE28N67xrP9tY+0LWGkYPE+pnnHqw+wPVLhoIBBj\r\nVYdAt+iiEo77JaxsXoXL9AFG761/V50F4hg=\r\n=oaIa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","gitHead":"3b0f3da033aeafdb05582fc5b135499d5637174e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"2.0.5","@chakra-ui/hooks":"1.9.1","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.12.1"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_1.6.0_1649345667941_0.5542925736899647","host":"s3://npm-registry-packages"}},"2.0.0-next.0":{"name":"@chakra-ui/form-control","version":"2.0.0-next.0","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@2.0.0-next.0","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0cc2ac8df9e958bbc18c1d00d4ea2bf015e62dbf","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-2.0.0-next.0.tgz","fileCount":22,"integrity":"sha512-4Gmwz+qdPLyIoKaT3iVa0386DLoAC3ajZqRfKUEnUsHwSyzSrKF/mc4pREP/ck9grB21Cwk8NqhnzDVhlM44GA==","signatures":[{"sig":"MEQCIAguOakNiNaA4LoCLxGfkRaXkCuU93JkV9aAUhar1LmGAiAWIMZhd5MzIFm82MeeVNS8vcdBH01Umw2Awe5y1ESZiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWY2mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq56BAAiYPbYI2KDqEAzVnoHnSxuBN6zDm/M75TJzzVuQD1edhiuPXy\r\nUdwNEdeHS+iDEEMGyH9Ey/lFtdALPnWk02RiGCpRhRlNInhFmES7w0b/xaom\r\ngpc6ClRr9huTVMiI5WgfwHSiBnPmqCq8aIJOz+Fy1hyVjdcmFAULGhrzpP67\r\nFc1JObeqPGhiDrxAQhgdLz/+aCMjQQua5X1cL+V3e5mkCTXpVGgt4Z5neaAQ\r\notH0y2jy0o/UrQsAR8n7ZU7ckgfu4JEQNW4f8RWU1/ghY65P3BXbWU3cEm2W\r\nQLhaI2OPqs1XVmTJZM5YJHnuT3uOT08/er0KNuccxlYdi5KMyG41t3STNPRh\r\nJFbpQwXOneii+MgW42zJl/nUz2dgbhQ97BaJYuxtHXrRv4Bwn4CHN+i4i2VC\r\nuJwrNUEMOvjwXch8jcFMMCwD+KyDVD3REyzuBTZDg9U1uDaCPjtGptM/K275\r\nQr3d8phYDhjEHEBAKCzJa7plIFDjNNhMBTQCHf9aojag3/uoGiWWouhrgW8J\r\nz/pIpE9CPhsZGSxoFpNq26n7szFcsWPjKQFGYFskNCa6ePdXkSMKUIQ9o+Jq\r\nJ8eL3QyKhe0ElGBljTmF2RwN3RbAwIq8RB68wWwwWwCJStCsLFdrU5kbAK7b\r\n8nvy71bA98bqbT3BnjZPtI7aVS8w28+7CdQ=\r\n=7oIQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"257811601483bfba6262e723393759399a55c148","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"3.0.0-next.0","@chakra-ui/hooks":"2.0.0-next.0","@chakra-ui/utils":"2.0.0-next.0","@chakra-ui/react-utils":"2.0.0-next.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.0.0-next.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_2.0.0-next.0_1650036134739_0.19879910321497674","host":"s3://npm-registry-packages"}},"2.0.0-next.1":{"name":"@chakra-ui/form-control","version":"2.0.0-next.1","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@2.0.0-next.1","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"04c59e25317f15dae913a9febf03f2eeadc9493f","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-2.0.0-next.1.tgz","fileCount":22,"integrity":"sha512-X+EHrGI4hxQbWq5gO+xWtU5XeRYC5GgTQfwoaSsAC2sgM94FynrZxOV0mimShTtc9QaxqCxCUmD8I9MAFae4Jw==","signatures":[{"sig":"MEUCIQDg5bFvqi6dRcCcJUtJToCEmKdc8K9nQS6JVqWMexeQOQIgKd3t1rPTbLVh3fnl94zdWl5BJswDutxigrG2nIjNcTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYkWlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXMg//Xc2f5VC7oXUOkWxd28w4Ij4C2Hj29aVxvYdmaOJolabgaYtS\r\nNdsljo1m9WNOH9Mj30nG5RTg7enQIIr1Mx4UTbnjln4cCbuCw3oXLFmpx+Lc\r\nouhuB/qMS3cbw/0QEIwI4uqn0EspBBDSDqJVFKqJKLvXYlw5G1krJoeAaGVr\r\nkFDFF8tjX3EqGbyjeLI6Sc7Zv7yqCG5RqFo1SBlh1GM7Yc/J3gveg74iQY37\r\nRX/ZPu2Zk5ZgQ25/FGTpOxG7/Sk16CT4xD1gpiNnOk10/kHuIgnEy8U/lNNm\r\nAd6+G2raJREXpTne3hCQePSEHEnlZxwCNLhKN9PyA8U0YFM3np5wIjMRaJxC\r\nCRpdC1ZuuEBhoZHJjJEkIwGOq7WdboVLYqBbrWDl6eOlrMW1aLlm4n64+T8D\r\nYKMtcBv+4JjiLr+5W+e8NH7/RCwqDfEvMH0qH0wEsIlxl3G2iuaL2GChviUj\r\nzJopzNsaALqrxHyTyk5HTUwMiSYxLij0wPYV3wSMxfG7cUutaXTFz/kUxHcu\r\n5/8dFuR4TzHQr/5DnjEH749GsXNtMvmUxiJ7ZDVShqsuU1zD7fnmfZpG7fKF\r\nJ46MYRJSGa2D10EfVWJw4qfIVJ3zWXBtHAh7Mi+h07cXXlABreugrLg/PMQU\r\nNZiD8k4byO+n6empYPez4NHnxko3EPAis0g=\r\n=SwOz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"d90c04942268b9b586b1ffae3dd3791137716935","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"3.0.0-next.1","@chakra-ui/hooks":"2.0.0-next.1","@chakra-ui/utils":"2.0.0-next.1","@chakra-ui/react-utils":"2.0.0-next.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.0.0-next.1"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_2.0.0-next.1_1650607525262_0.4300275515286216","host":"s3://npm-registry-packages"}},"2.0.0-next.2":{"name":"@chakra-ui/form-control","version":"2.0.0-next.2","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@2.0.0-next.2","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7ca57044225481332eae3316b01f64849ec25e14","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-2.0.0-next.2.tgz","fileCount":17,"integrity":"sha512-xFoDcmFes7wMlXPlD6ZZ/746pPv8hqxoX+J8yjnTgGWgXzXGFj8we+59zaHhnjmau4C5U9CU5DAapoh6r/rN7Q==","signatures":[{"sig":"MEUCIQCXqp+lUhUnN3rfrkGyI486LYLuw0b0i9XGR+cZ+VxX0QIgXccA4fYl9+aBWMYZ82cKnQCGgNTV10ybESDuaMZPcx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic4jlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXdg//b+ycFoQA5VLcDvIrqJwdGz4lP1xor24+0/11ZwwAm5Wusec0\r\nTR3WBI5nq85PATq+sWFEQ3x4Bs2GFdhwpC6LJCEr915twRUZWBdW0b4mwlnM\r\n591wH6RCMYNnjxCXy4cg1KE5nAho/C1JhbASrDXAa3g2kmui3jnaNFtJZTso\r\nG8FO/QPRDcjY5VVLO3Y/+9uYWUPrg0uMh4sLNWWAhhX8TOQEU8EPKDkKi6Dq\r\nGnbAPzLsKeN4xAHIH3vKm5eO1udk4KQaFeTb9rbHtcuZd+0fjtxtOoqv+ykt\r\nZfw/x04V3cmL09zZnruRde39ViWd9x0MaC66+28VmDptMUNaM9jAcI3gwqoB\r\nYujfi1FRsNWh4pjgvynUqCi+KBCTNjStZTQo9wxu+eRtBbRKF96H1sajEjlg\r\nrpiZO/dwVLYO4CWjTImRwEJY+C7/g8dKkaxFAUdlV9FK2rkNb/XZ+XlUP3hm\r\nvl8fuvC8tSwTOJQsq2pJOBvrjhmk5U5nKnlh5nIYSUJDx2DPfQ098tMWVhMf\r\nrTkcddS1m+SAw3XpW8hBrU3fqzlC92tL06fCplSz9ILzCR3igd4iAn+dMsP4\r\nxD08V8NO/fML+/KJ8Eb8brRdJ/DdBDbvcN5D5QyFehpFeRsjZXzpEP2DHK1a\r\nBXGbVQUgtzSBQt/JzS72Yrjc+nvT5YKYI0s=\r\n=1eaY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"f868f7862a4206cb6794ac526336fcf4c19f34e1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.0","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"3.0.0-next.1","@chakra-ui/hooks":"2.0.0-next.2","@chakra-ui/utils":"2.0.0-next.1","@chakra-ui/react-utils":"2.0.0-next.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.0.0-next.2"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_2.0.0-next.2_1651738853687_0.015827354930233017","host":"s3://npm-registry-packages"}},"2.0.0-next.3":{"name":"@chakra-ui/form-control","version":"2.0.0-next.3","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@2.0.0-next.3","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f95888839c732f79b890e34bc19311ff44d551c7","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-2.0.0-next.3.tgz","fileCount":17,"integrity":"sha512-KxCJ9s6LPWNpAHZ1XVsyTxSrafr4JEnLqT0Cu0eieKpDfKm8VAtFgzm54GUN51tJEQ7cLmLXgwcPPz8tOXPSIA==","signatures":[{"sig":"MEUCIQC/gpuvc9tNZKeioj1t5ZKQhajNZobGF9WI5VDgHKWrMgIgNqMX6E5WftAiyaUl3V+rt6y7t5WradiF831fNaobtwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieNOhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomhRAAmtnIsWEkzydcQv8ryBQFiVyx3b0boLtArkBpcqMvSmhPs3qC\r\nBohBbsmJh+GwHUzmM5AINKHYBNGU2gSVXlv6RFU25a7VF1zBvRgWI7m0lwIO\r\n5lEOjkP4bIHoGZ1IZW29k8FUM+Ed+KxHrkE2IfrtO9IgIhebIFtkLPuRL+P9\r\npq1mCAP56Vv5TEGUCgBHS2e/mz458P8kyxt7TSeVp+Tf/80vXe/is4QVuDKM\r\noXwEoaza4vTntQ3zFNH+bs52/hLl+V+8BoEqmu2V++cPv9VFPi36Cg3V2tCE\r\nTzRXgsfKCllgLXOJzqi8L4k7OxJn095wA4m66nMJ0Ot81S9CQxDyNjgLeH4Q\r\neJDU98Lpc8m/7MtruzQJEhQ7OJ6emDPJquKa3ebzHS3VEkKZkmfI4YZgoIde\r\njSYeOVZ2qnANzXwvapyYkoqz1VeRfGLLoRbRNqVRy25ynEri2+GaRxvdS4de\r\n55h/3ctAOZ1tRHPwoC90RidnN1rahVlJDXvV/ErFKxCXJfX1dpL2xX+yyXfk\r\nWeTpOugE1aw6Ei/Cls+VZy6uNqzvlOTofJM+XifzVe3SD7c3GzzqcsTpLJq/\r\nkyJdkPShUYDQIzE8D78Tsk8JUVLMl5UpbH3BWeKzhDRpu8f9W9uiMDHPSEFO\r\nzNYk/Fsk9NMqVhLb68oEDNZmXaeiZb4UhMs=\r\n=kVuM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"839e03eb3d949c1f68fc3034456abc050ad2d8e7","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"3.0.0-next.2","@chakra-ui/hooks":"2.0.0-next.3","@chakra-ui/utils":"2.0.0-next.2","@chakra-ui/react-utils":"2.0.0-next.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.0.0-next.4"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_2.0.0-next.3_1652085664937_0.8544529479595138","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@chakra-ui/form-control","version":"2.0.0","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@2.0.0","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3cb69184d9d05d29ddca2abe022d699978e11e32","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-2.0.0.tgz","fileCount":17,"integrity":"sha512-QmIeUaQd/aYkVhxPlf8Dmt5chUgHldxrsSdOZfcNb/C53tbRniLHfWxM4L0S1YmTfNAKngUdVpBgCTTCQ+xGLw==","signatures":[{"sig":"MEQCIFiLh0DSsh080baegHrwqdvBT98hrvnrvOs0vuA4TvQDAiA8WkuGxWL768uSkGctbhlr8Z94coBfQ15xQ1W+LkRARA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifUlNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmow4w//ZnnbxbY1ouu1/FwuF9NaNdW5gIMGKBsnQjgsUsXdqRiz7faO\r\nqqMPTUqQ7136DW4oyzdS9n5BQQAfxX0qFUj15gbqqXzWuGOsN0LYT9sXIvbX\r\nGVJigxUbvh0iQO8DnhmQF9pLdg1LHSFaQPvaU41AE3fTYHXPfxVpRK5K5Nxc\r\nbQ2bJlFdX1cihzVNpBMn4T2RsU8AJpxJB0ZhxNMB45jNOSyAJc5VWILiJ36l\r\nx9nWj6zDu9yKjGJbK+OCpU7llLjA4VANLa2A2Z7g+OdDNPi4me9xURHaagu3\r\nrxg/7U8PL1MOH/tNtjptyqNqdGOqLd+IA/N8+ShIWgGmsuJd8ogO8miGs4iI\r\njBeA4IKwJWHMX+q87tOypsRXEIFUDiy353PrQ4Hz7IgWGQ7B7ntAGf/erXmp\r\nlYZUIsqItARFqxCq/AQ88/zf6kJ+r5gFlv5LIFOIaY1jxavVFgBA6D03wTev\r\nvmmz1/aMMoScZfOoG+dhWvJ07mXmLfE+H5s4RflQqFS86Q8I1yxJnezG7HcT\r\n2VXUzKk0TiLIa/fpfwxytdoIiIUKC4tI5KoCdDrPsvkId0//wk1xCVBfolUX\r\nMroqIVpwaktT+4cAHDr11XxpkXOe65Oz1ZNk/ERT50MeSg0Elj4txezrzq/0\r\nRR3uBWzYEZZbkdqf0UmdznO12MbLXQlN5aM=\r\n=xRje\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","gitHead":"48cc749d08853bacaf380a03abce69d428b47022","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"3.0.0","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.0.0"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_2.0.0_1652377932962_0.19301321640950553","host":"s3://npm-registry-packages"}},"0.0.0-next-dev-202241614737":{"name":"@chakra-ui/form-control","version":"0.0.0-next-dev-202241614737","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-next-dev-202241614737","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"de1cf3f87a3624669f485db35e3241d5ac79d4c5","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-next-dev-202241614737.tgz","fileCount":17,"integrity":"sha512-9KutmbEiUClch8enuvMQSozG1MY0Z/mVtjlFgSPALtO397gHfzam3XbUsdYyDBB6fcNF6yVJ+SplIHGCjQaAWw==","signatures":[{"sig":"MEQCIATNHDmdFamEmC2Rvexet8w/YjqaXm0Vng59B45TCHs/AiBz4qPvcdgkBM+/XR0HMFoR5V1hSc93c3ZQjp71Dpo9Aw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiglrCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaVw//VqVTy5qTVma+KI7FRBPthevN5ZqPJAV7U91PCk4jEzafbpo/\r\nyE8Bzooa55Ne+fdrhPqnfQmhCvoHhT+G2g8LrTtLbt+fGt46oISegaISLWNl\r\nwZIdAiXFpNbNdEUVnJAuK6SHL3waQ3V/B1qtR7FF5ITHIi6AYsyche9Wqj/A\r\nCFwQTKIN36BYG8oHa5m+IHYRQG6wXdBE5cMztf1qPboj89UQKUraVCdvuG2n\r\nZ4rYNRFSgcie0c3OfnG2NuBY6udzYmf5gQZUmKuvaZU9/vH/c9brInWggIpf\r\nfMtjYGHl9afEN3LX8LEtrPDnCYy6rk6nvOf+w8dvVIoUxo310Y/Gi6nJPtqI\r\nFuzLVGBlOgeQDDZjsfb8CFLOreG7G6CdWS6CCpbAHTdzc2yx/9Ls3hpxzx0D\r\npwCwCVJj/xHGoo1E85zzo4OnYoFDpza+C0RHdO5SjcoJJ1L4NjUk7tts2lg2\r\n9rQANIV3f7PvRYx3bASjXMI/eQRA0sW1UbsGpuUm9z+wXubwhkTQu32r6yRw\r\nEybLYQbFWc5qqKiKchUgvYLkJOxL6D5xWGnOItOajlnyhqLopTgRp/LUYIrR\r\nrwxlU9AWUmCNYSiMmQMMWRYs5wlEYEF55PxmAiE60R2q7EMSb6IMFdeb8Hme\r\nVSdhjlJDVdewl7zqMpnG+LylJBlcyie7mGs=\r\n=POAX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"fed228c088bcecc9b367198f79231c98e0a1d29d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-next-dev-202241614737","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-next-dev-202241614737"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-next-dev-202241614737"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-next-dev-202241614737_1652710082067_0.2518081881024503","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241614743":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202241614743","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202241614743","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5bcf7a338ca68594dcd41a7e60801e2aa805b78d","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202241614743.tgz","fileCount":17,"integrity":"sha512-TZHXy7XKoVQuNZRZEUM00VPz8tTlpVMJK3hY0EDVwAGrUUet8YzskhhCDl0NuGygGUu/zmxao+0TuZvhphgTBw==","signatures":[{"sig":"MEYCIQCAY8ZfgkWzgi60SlX8zzLcJlPrP425lwKmzFCPjP7YEAIhAPPVo2/uX2z2Sx/NfwO1ZLXVTEYur2lPG1zcKqbccEyj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiglrKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUMg/+MEaF5y0NeoQ/kOOvKVWspKRofHQ4qnYl3QnzcnKtlwJcfwYV\r\ntqQspybbLCmwOMXBwxKBUvENLng5l1frGUotoFfTj1AG7M9lvEwToKhHBdTC\r\nGRGeeI4jU/WMHNTgDkFbR7wkobX9LzHxlF3DYtFvUlCCdOs2AmpTAmcGz+E4\r\nEnIZVkoCTbdEzufkuv9oOcp/qoF484b8pPyAzVL3FO4qfV0C3V5uTMAqK4VI\r\nny4SQ/6CVBFYBrUsaoBDcvUwp4pYRC9IrdjMOdnjVp2VwoVohkvVPhxmBGlb\r\nhx7SMiotGxpDIOfxE25fQkEecyuK7RuOvuX0xaAXJzO6Hij8oEj4slWOfght\r\n/ii3CScm0RtvYMjWdl0Dtq/TwN/0CptHBWGYbf0Fk+HZpgkLN+j7WqKSccTC\r\nzlx3ivp9ZuH0mIb++fxMGAPJiiFI8wq17+a3EboxqVLlgeJ5xm3kPC5vmjAj\r\nac7jq3pXWPJvgfxhBjVlrxD2X+eX9Q+QcSSQmwytn5rB3tygmwijmhoEzK1Z\r\nKznpoCVChkbubR5r82HUr2PpfPhEXZ0ZHPebfIqLqz5zqkSxOEt0XqVzpZMP\r\ndkWxcBIQm3kOOnk2IbgE4v8e079bmnvCP1UOKGhQQz5H7xL/poSEIWsgqwzK\r\nM1ujpoFCUlhQUdxBiNx2a/109Rv3lwinTPs=\r\n=fQUi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"fed228c088bcecc9b367198f79231c98e0a1d29d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202241614743","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202241614743"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202241614743"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202241614743_1652710090408_0.4187519752618669","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022416204849":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022416204849","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022416204849","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"82e55f7806f56ab07a6b017825f2e0d73956ff46","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022416204849.tgz","fileCount":17,"integrity":"sha512-wq1LC1En0A2frBayXK+lJwG1s8S5endrFa04XfEytrOJm2Qm9ayyp3v4Y6sV7OgaszMo5COuZ7VTf6SFn4SG9A==","signatures":[{"sig":"MEQCIANICcdpIwlPWLAlDKFRqodFkT+nJnUsg/hWCXXCVOGnAiBswk0jZkCfUZSbWFuxyF/jGzHS+ddbD3Dajnznq+zoCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigrjKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9OQ//bLa/b/n1hZ8I049e3VHXbOdR6YIzAUW4wz4RnTKM5RLjY60D\r\n5+MymyWGkm/kZu5C2VXEuNyJlwmgGHkjQeUMbNiSH5pPQjatfXJfisI8SDwQ\r\n6kVMBtRzErR3t0hcVjeCdJVbxAZcN8XqDjAQFYpMv0jDJT12ZRpSXmoE3/LZ\r\nCu9/Q8WH8TUKhqj2jsBiRt2xLHfe/RPd8z2MJaUDVjdScRYlXmQE2ARxGebk\r\ndvIYld6MC1qEmi7BL3Rh0oMtoEgUQBg9vKL56RWN7MwxdcTKCVcvk/eXAbXU\r\n/0zDHQ/SqhFeN2wDz+mHAetYL9u1lN7LhhCl/mCEk8kDP6GcaFXx4vTwYRla\r\n28c+RMMleddB/6ayRD5PcIqsdJK/EvfGAD1CnHudSeW0RPL7HJ/YKe4tuN/6\r\nwCX7ThQ12NwXzd+fZQXnf28jANm73f3c1A4dE2x9EgHz2jSP/e6L3PLTe215\r\nXFOrlFkcWkZTEj6YG2PqiyA1mp7z6lpIN4fAqsk6Q79NoC1BXplk4nuDjSW7\r\nT6uNbDBQ9RLImaA/9MCyGglx61W+yYVw1Iu3SnKxIK/3e/11/pbaMIo+vYmW\r\nj5JwUsZVsQ0q6D5yBd1N03cO8+KFlULVmmb+ZBAPWFjoFe1wsAUsqmBDvpDo\r\nLf3uMjdiDZwKoj/rNfH30b4UCPuh//siG2Q=\r\n=Qot7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"b6e8ae69f1ee9c566d9a7c99308c18020f96feac","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022416204849","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022416204849"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022416204849"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022416204849_1652734154277_0.6581626367554463","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241784047":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202241784047","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202241784047","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7387520ae759bdbfb04303fc4460fd2b8bcd15c1","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202241784047.tgz","fileCount":17,"integrity":"sha512-g+xCPe++VlniFGopHZczEO+tsmh/QR7GYjNc6F4ypJp55EnqGyEugbLHh6xULo6D9oDwFV8XAcpvv0DdHTU0CQ==","signatures":[{"sig":"MEUCIQCUrFJXLH4Ouk4qkrX937VwU33YPaQTbliyTttuku4V8gIgB3OqAK8KluG1qLPEf8KEs9Kwmklr0/Qa7BiUbhGL990=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig1+tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovIw//Z5daY99MzgfyF2VGNa2fT1vnwbqER971z+1pGBHg228E/4l8\r\ngp3G6/fT+LWQsaqC0tCPBUqNiUMi8Px9/IJNPerOX+gHCgBi9LgDeODWRVnI\r\nqPljqdl6+wkCnL5ldDZMcnQOKHk5E6mHwqkwjZiugfw+/xRWwKgv5KfmB6Bq\r\nPuLm1r/9g0vhc1pVAHyL1bHkhvtchpZ4gx7MK3n1XfSkB7BplJlzR1OuCtz1\r\nVSH/r6a1+Nbl5N29icOUxDd1Qk8CnQktQKhJ5TkBzz48EwjihJ9bLm6Mvdm9\r\nYaKXBHzrp6zxfC6R2Q0tl53Dw/Dg+y2EYHfhujQQtSNYcaNQtXaWXWL3kIFg\r\n8aC44GHXPZOSmJ17ff4eB0FP3rKDH05yKQ+/iOGxvkIeMdXPHEDCsK/n3uPL\r\nktI18u2A2caxkpJyZY6t9aKqcA0iYo30T4JlI78NimzGL/FpKlPIkiNYO7QA\r\nQGBwWNjOZftHIZLcGgROp02+I5b9zFKFGTRzW9EebDMq4HzuqQ5VnsOHaU/k\r\nmpgE0OWUmNiEYpR6miwkyfKMBKrgPNkl+rbH0olCagdcWV6MaRa/mvOQSkwO\r\njn5riEI/Ro5g/h7Gr6fpU3W0Aj6LMj/sPVm4+XjBEIugQebvOGz0bPtvu+jH\r\nXw8Uwv4MD5olq/mfrEO70nG/zdtgZ3OAh5w=\r\n=wBgq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"4f2807e4195f5a7de1ad9946540fba8590ac42da","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202241784047","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202241784047"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202241784047"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202241784047_1652776877031_0.24504959434613482","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241794553":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202241794553","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202241794553","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"40c82f696f7912c851c5cb76651bc1cc427ce6e0","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202241794553.tgz","fileCount":17,"integrity":"sha512-/P0ZhsDRPfVBL7yajl568cJlPAYcKHvhA7sL/7winHMqDSbLzGRAdGw2DBz/Xb0UOrb6xtytJfb45DYxyerdCw==","signatures":[{"sig":"MEUCIAX6mz5deI5ZP1RsCH1GPx4vEJEgVbnjXm7Fic6xy005AiEAvuhhkCH2UY+dPYmiw48I9ok2bYZNp9ySsVHIq07PKGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig27pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQoA/9HRbkemAEp8S+HVnrJn66jfA1z07y7xrf+nGIDDEMHfIDzdd+\r\n1DF+cyEFdCp0QaPV05J6fXVakwOOsvbjsadCWCyQpJmL/B+Kqz7t2kMppDk9\r\nGocDTIglbF/3hg1g3SUSiapqyWq3pGYEtN/ws3fhhS4vv5C9nTA+PKj90rdR\r\niWqEnGyDkXYlrRuySOl/RMcKNcMgk9qRbLMyaESP3S6e3qmNmV61lN9xepG6\r\nns6jof17nhzz6mmm7bUxvV6XxWodBIEUdxV6jNaPROYq8wcv4ieM/uVUdowF\r\nksDUigw7HwDJaALUh60mGgxYJfzByMTlV975/QIEAgc4mMrRiC9pvpL3rlYN\r\nYgqKBHT/Mo9GE0ddqzZ8AzUrWfAaOVWYihqJSo0w2GLlpEw7FOc2eYYdwOCI\r\nCckchuJvVuROokT+CrZoIvqjfCdFedeRGl0mHojIIHTAcgI83ycfYY4Dpn7v\r\ngIzpjgB/nGR4FDTGvDrPm2Mq57j9v2W20h5tU3wuvUvHI4WLBNu3FwOUR9oj\r\nU2DB1XBmgwYTAZv673ofdDY5Wy90UgU8wEfLp4g2WOQJGRs2whfpldeKZoMr\r\nLamJMVRVIvjT8oyhtL+jeOMdVKagf00GWv+qeuK1kqYCnwau7eciUz6kWdco\r\nle9yXw8btiruyC1qnWRKINHUSKCTkY4Otys=\r\n=mDUP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"05f922f2fada732f04d93e13bd53434805f4d619","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202241794553","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202241794553"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202241794553"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202241794553_1652780777153_0.608896270352252","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241710143":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202241710143","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202241710143","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9fe1fc2f6bc61a19ee7d58eaa0153b9cc647a129","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202241710143.tgz","fileCount":17,"integrity":"sha512-GIP1SQBvjtrMXXfaip0GTHnp/oX3n5l/29z0Mhd6ahmok+MR0Uc+bps1UzkdXeYLCKSoyBa7U8ibThp/fuQU7g==","signatures":[{"sig":"MEYCIQDqujKhjz19JUcXxzUyYubhydYoHYEtmgzFtA7CmXQCZwIhAOPfXyaoIk/VXCybqlEmkggK1GzOe1zSv0rfeGaOUcjN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig3KgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6lQ/+Mzx5s9E4f5Z4TqxgnDPTZoWqSyFjI+L0wmcsjur1RZskq8Eo\r\n+f2VbJ7TKZAvbEMGnBNjcDH3W65Bdlh4H/qCLVTl1nZgrustnE13m1P8eLFl\r\nZHdTArS0+iSJCjiWj9TAbFWSIR46/s6Ft9nUgSHggrlwKapO3bwAFNqlEkKZ\r\nDNL4kd0nFi5VOXtgbvdx+ktZgXG+coQQJu5lnARz07VF77vNmnkEk6FJQCCz\r\n+y47hWpEeEvg9xb+XcLRYx0amO3iSBnwC4AKUhO6aUrdVztdbfwQYiW0e1bL\r\nQgWrBVVxbgn6KOHSZA2gMqnX8Na0PTEClwFTWYabxKmc6VSOYdViaZ38h/35\r\nWDxURqOjY6Kmaef3aGTULaDc2wxXt9aDvgh8XVtJyYEifjuxTBS/yzW7fvXD\r\nvuQ84BVgotLTnLd9GUKw337groGB0XG0ru72ZkqEFevlcsB/mPhH87cEGzuc\r\nkT65vs2nIlyXafo+tL5J2TaGMARP+GhdnitVPOfy2mkpPtjhn9UJi14CitXL\r\nnUbiZDbQB5TqRtahCBdmL/87nn0j6EK2MGNU4n05OQb+6shZvhk1y56E6/mc\r\nY/8w8hD2Qj9QSa/MDGGhqwGnHQE384OChHSYV2UWdCYK7Ut0WGBjsWr72SOT\r\n+ozlIlgiKPpYacxvwpk1AmDIN0I8ZiW93h4=\r\n=cQmA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"7eaf538a4db9e168408e114f80a2c2898cf4fd47","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202241710143","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202241710143"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202241710143"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202241710143_1652781728040_0.3844781605593488","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241710959":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202241710959","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202241710959","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cd16ad3fa8b2576983ad459a8ccb4e60083709b5","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202241710959.tgz","fileCount":17,"integrity":"sha512-mC1fUJei9MxuDi/i7S/JFHGD7Sc+fbJEwBtAng9Un1MIEckF9o/bU5avMawhYPsH/xDqiYx5BheJtgqKLJ2oPw==","signatures":[{"sig":"MEUCIQCcchg7N8TiKq/XqeOjxkSaX3ywHagJgJxaXAjuaMThYwIgat+7nfheCjhqlCZ+qfu+QYq0+mbfbkXhbveyIB2Qp/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig3SRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxVQ/8DRksYlUta/vPa7diM31uACOu9OSBbGe5Lap0s22x6wEy78W3\r\n9n1VhoFCw69jC3jwcwswtMSSf+HmisTZMx0UgL2dZdzJV/pf3lFjwKQf7saw\r\ntP3WCaLUhP1SvU546X0MERErpLoI7gTJFp9LL2xpMH4s+JWzndx7Q4NRDE2L\r\nHvEQAzmITid5sk9JsMe1Sb7ae+K8FD5wqqzMcJ2idC4mT9zFOvY5XtG96YO4\r\noJGXC2SyuQ+ORj5QtNIB9pF6v8RVgvmkDOZwyn8o/nkWU+AmqSv9HnNL795U\r\nex/d5WiYPKmwqeo0fvVkVYsYTjKxOxTz0nmrIMVw3rtwEbPCftCAUH5TpHp4\r\nJuAMQZo2y/F6G2XCcdYVN14lEJi3cxjhkdTZvAnFuCju+tba1v5qPyU8DtMA\r\nVOaDAD0ie78vE8dITp9x2NHNasaKvXsgc9GbYUt5Se1PAzUa0swPHpnGwcG7\r\nr8xcLfT6nNligG3LIyd6tw8jfugZv1Rg8E3OwoMyCZFS+VFJKLqTn2I37u+L\r\n8Y/BYWLtLfY/o+Ys3Wy9tR5LcWBSOgbmYvbDPQXsp9ylAaG2BLMzK7NzJeNH\r\neDSSFLZeuIRJs3MS3wWbacn03oZmjIOZUl5Uf8NAZA0sa3pu33srYy06/Kcf\r\n1w01teRkd1lZDWqpryJJBIVHsu4IZP/kQn0=\r\n=ab9z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"393ca5b165fc46e23afd90a898256a0cc3e97731","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202241710959","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202241710959"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202241710959"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202241710959_1652782225457_0.9976994356141782","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241716586":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202241716586","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202241716586","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4f11804123ab22790887d9ff1ac7d5ba504278dd","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202241716586.tgz","fileCount":17,"integrity":"sha512-8HqcqzZ8CaquciKtDibIbClYqekceI9Kp1NvaUqTTpLVBOG/nhjQQZhjNtl37qiQZqs/lAez5lP+vKeV3TGw4Q==","signatures":[{"sig":"MEUCIQDwxpfJSrU/8QrtcaNGLzrjROwx3z0KDX/GjeQXoy13twIgZICPZAZ1DRVAwxFJVRRrAAONPkhhRx6H876NhX5eYCw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig9Q2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUqA//ca8D2lkBLezkdoLAfslcdJ9INQOni+Jhat69n4w8XxISd1BC\r\nmjtKHn6UfZeH9jgM8BvcEwhvlvXYq/rA6pmPWIAh2fAzykx+Jn1vi23RLGib\r\nDcb6hbq0YkS4jyzZ3SkmqtuthxXZQOW3r5Kpi76/Y7skShcdXOXG5khvf+Xb\r\nGlrwCqJgHB6+w5zEcW7yn6e/eT2/Qvz00oZkqjGVYpq0+r95kgQssVeUCYct\r\nmQal4xcCa6Iz9kfR9FYhI66+qM1xjUTHZ4MNUkt2F5uwD3VbxEa+gnk4uuCy\r\nIsq1W/WzY5aOl1lLjDm1T39mEfv8ik1Rc7+/p+hdJahBhIeCYUwzTvVYZTTN\r\n71ek2LpNvN/exSJxUfjO9ROW1r+VDCpaUAapSnl7knebmcbA5lBy6xzyn6C4\r\nh83z1QQ2fbdZiqoVsDu9o5PExVBbO4ngWe1e8AEWOSyZWqI1X6QiHCZh+qUg\r\npbJdkYEWwl1vIeDwTfvqZ2o2IuFxsV42mUck9p6kg0ikFwhTn/g0JKhTwdH7\r\nZoIVO/9aax2K0gcHAH9Poyt8C5MZkMWAtY7oUun7UdHGvVdSVgNSIBO8ZEJ+\r\n4bwqv/CKZKlNIiet7xCicjxt1qjgd/3r9OZQgnj6W638REVfQ+DR2lMR9aMt\r\npo970JffilhRBdUE+D/RILXiRDtom9yhFYg=\r\n=riZq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"a9727167c9529f5512717ccf162fdeefe37c5d8f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202241716586","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202241716586"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202241716586"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202241716586_1652806710638_0.6189828440779392","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022419101754":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022419101754","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022419101754","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7b14611b096cfc90ffb83b7edcfe60fb2964ceca","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022419101754.tgz","fileCount":17,"integrity":"sha512-ERMGhmyjOveKA914NZJh0a7yDaVvvJVdxVKbsqAJaGI1YKBdgjwjQ10WxQIGBwXcRiNKog89SXB6tiOf2TFl9Q==","signatures":[{"sig":"MEUCICbPWXnCRCoofquEO1y8kOzEBVX0tfeKxA/w0imCZ8dKAiEArHkXjq2LxTVlvnDXEq8A0K8NRzz6KJwVecJ8oCTODNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihhlyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOOw//RxS7LNgN0bJqnEWbGFZVGPjzZw4K2p+35RAG/OkzoNOGgVEe\r\nBCZNUji/Nb6ImSOfLVHra0UjYISBq/kRbmqloJsrRRfPiQBwf4Cr9/iPQYWq\r\nkPj8FXy5jnMiY3OEeHEQC8h9I3ea37Z1DkfGpycvaAD0otD+LfjnfbuaU2td\r\npVbYry5C/ixuFHCAprtlKHU8StnG+ZbL27IuIcNhb4uoaEUYgqJ2jcrqQcru\r\nn3OimJWMTbb26DEMJ4XMSFRYAxnH3YUUIyv+ELT++qDXH17STlk7LN44vCpZ\r\nUMqT9GgW5eZBGihyTX3NlWDLpIMzvxF/lfYaUEWskUp+LOgkfSIpYyv54cY5\r\nvyX0GGxHa773kyuqfG0iCykJy3hHTXmO+TGoZ5C5ECD+Df6YibEVlXRCeKfs\r\nBpqDdW9pIJGoUlKCwdscdCYxdlUosIxXhBThu+SZn/OPwZ5mAdVVcO0wwxys\r\n/Y9TSqIOL0UdE6vlgsKaGkcHtEuIHK+ozwm8asZZfrZZC6vZ46uocHOwIYIX\r\n2Ze0ms6dYcO/nprvT/1jajUSojC12G6RBkHh9l2g1pkp72cPhNHKErTSrJ6a\r\n1stLgMucbk1siIGLmlinlhZVmOeI9XtpPY5NFn/hVbcpZg+2T95ECLvthaYU\r\ny1V5VqpTPLQkhlwHpE49v5rdGRyK7iNzZvo=\r\n=aZ94\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"55c87cd62acb01bf7a74d75af24cdf8a091dc1a6","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022419101754","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022419101754"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022419101754"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022419101754_1652955506412_0.8145947282601715","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022419173934":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022419173934","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022419173934","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"57835e464e83f1b9c5c94982eeba6feb42cb038f","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022419173934.tgz","fileCount":17,"integrity":"sha512-mZ+TTOk6DYMBtOv7ZkreG9IGhpQolnQSODcvdM13B/J2k8uyIZIdzDWFSrUAXAx9u18ODIJtrYxtb3o1DfNWhg==","signatures":[{"sig":"MEUCIQDX6xCVu4anPQh/U1Ups17kyMBcxsWxstdy0qZ1/1XYKQIgSHBWqP7W+TE76Fs/rPJgsjX7Ia5ksTkj31TaPD0N5Gw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihoD2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqX9w//SU9NHrVnaEoNoT8mLX5h6AD04gGGJtRfTUAcjCYPILUC//Tr\r\nY+fL6ZW4MnkHj9uJ1su9RREFvnQc+ADzDp4mVO7mA/JejebuzlayZFWVV6KX\r\nR2cbBllF9JIwty4TA0h8BU61cr6wMXzXDMqsSvH2bPLmrQ0nj0lmhHJ0PSzG\r\nj4HCCQXzl8xDjQqale9JEp8zscOlV4IO5arW+QRv1f5ddNZC4Z45zh26EnrP\r\nNIA3wT2GQUCwGh0xhBBWVQGnLlvilswgbpxIFYcw6IfsHe0GsJeeLaxZLJhF\r\nAcRN9ImaX2W6hutHLkzyWc26coXMHUy2xjCutRCZ5g2vUFIo4yKjyndmCnkk\r\nYxZKfKGVayi4qE3JzXwuF5vyPhbh/4eMrvjGFHFBheNOJQ0XPhVjL4AzPM6t\r\nCZI8c243/D+91Ncs9KAN2jZjda3xWb/MiNb0DTEw+Jn9TmDBpMEDV99IklxX\r\nuirZnUhP0hEAP3LCSHKYGqZvBrYCx/bri9AeuU4+ycbapf1EErEoB3PHTQwP\r\nDq9Ia/s30ajSly+E7Y+fsoF5YEUKaxPAz0+4rmYVNET3SNsVp7CtyBnkYU2k\r\n2OB4csTnreXBe1Y8WlmdLAor7zF0wkz4P/4pcf69eP655wahPXU0Xdg49V2s\r\nSCqjfLyR/v09wfpk5+iq6D1PEEPgdTImuoE=\r\n=vvNr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"1e1503f48905bcd4c0a1b5767679246c1a03db1a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022419173934","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022419173934"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022419173934"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022419173934_1652982005994_0.8019271119475384","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022419174740":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022419174740","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022419174740","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6cd63ea0d89519ce4bf56af0351856ddd7444f0d","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022419174740.tgz","fileCount":17,"integrity":"sha512-eg1qqUXE239EyKvRGFk4tZM8rsIznLjQpO8lIlQvbxsZMHSDFuskHUZZxNTCqJxnc70BgnTmosgbAd7Ldk4P0w==","signatures":[{"sig":"MEQCIFpi1C6gjp1vAH52F6WJ5Gw1flr4h/LovRNf4kz4/8fHAiAHrGNYrwcaXN78k3jlNygF1JZycqtekvmZgmsvxjbw7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihoLZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpfqw//awjEHR+Ghy/dgsBvqRC4bXx/iQY2w2N9rqivwNM5u0Ot1I6u\r\nm30nEuhLcDY3tPvyaPEJyI6Og51cxPlX1XP6YiIRntiDZ/MmsaMrRhrL9ZCz\r\nfiYyovF/UYJKV8v2JU1Dg7ukVG0evfidEqiDvQ2dQLqXd1NW9M4PPC4yFPbM\r\ne6+rHQpkMxrPRNAxVxWZiXfjMtBRmSj5Dp3sR79oq/vOw+iQoXwyNhDm5vaq\r\nsH/dJJ4c9YkyVIeoFbgWurUt8Htx7AdBhfAj8XUAiOtB0ZfW18uFcVO5PjwV\r\nrulfvBrpLRCHB9y/9f7mMbeGFrflsloySpXAGXWlx3iHjCBqP8jjWBBOdNOK\r\ndHNDnyUetTfkgCq6kxO/oLKZLPM4eI7V+u+f8ivTeFlBl1fDNeXkWLd2D89Q\r\ndpNEBPUmZSf6lkDOTLaM0iXcPnmLPGvy7EMl4jfOIlmDI2yyWBpHrXmkjZd9\r\nOgE9cfRCw7B0VldIq67PBMFz1b7eb8rQKwc49AsQVrkdBu9drnSTJ3MpYBiX\r\n+2rMSC7l3dCW8XpKMfALCvfZZU80o/l2UwyspJQcvv4eE2fYuGH0ii7/LWe8\r\nzTqTSA36dZfhxv/bRF4doonbn+uKvhvbVMI4n65xVKYIPmVx16tz5AwMhc1J\r\ny4LVgh4XOgoKaRTFDpDDH4YJjIyobUx7DdU=\r\n=UNv3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"6f23780c03750a1b70d8c855c7058d2b9958b6c1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022419174740","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022419174740"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022419174740"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022419174740_1652982488868_0.34811306912544215","host":"s3://npm-registry-packages"}},"0.0.0-dev-20224205231":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20224205231","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20224205231","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e36e9ffc976a7405faaf1b0844031ff9f214c05a","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20224205231.tgz","fileCount":17,"integrity":"sha512-BADAI7xVkDhtTnREXTUxsphX8Knf/YTKJa05bH7YfsP4PbmvvjKWOiA9VActjS/L8YXg0A0sFiwRPwDLo8Ht7A==","signatures":[{"sig":"MEYCIQDyKlFf7ON3oxPRrEUF0P4vguzi/ruZy9pO/jVsJw3ekwIhANAhAns4pF4dcA4eKfHuESqS3OD2kNWQcGhPcUb4EiRm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihyXXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6EBAAkGfsqykogA4MDxBai9yN9ByQv3vOUNu9Ey4Nf/v7YiFUpcmr\r\noX5Uyn7U+OdrqCByv5CcaES+2X/hHkCudx4FZYfzOmUaFCC8NkG5O4Dq+qVM\r\nZGGD5dv03qKhKBScqCOu4YuBJadP3zRT3J77LmEgWpT8CsJu9yN8xTPukRHb\r\nhlz6nyqG2bdea+XjZMRjZWN7oOI3DIjTCYhWXl1S7+XWat1d6t6Axo8OSrPY\r\nnJXk/vfNDZi9+KJ3/EFk/ATGg2Jv629He1b8PdAb/v9s/IT/mPacXBU61LDv\r\ni92wfqk6NcQEHUtyg95LanVV9TqPqIFcRk84Bl2QrQZLAJxOS8S0jXOFQHP5\r\noH56q8R5gZl4pd6lvTk8Qpfip9wFJR6U15EuVEi1J5LsmZD80K+LA94TXgrR\r\ncN/MTe5XMfTw76jH2vook8hZUyAB1+H49kH+i6QNeElnEmfDterQfvmvVHjO\r\nrq2tYLmQdfpjf2rdN2nOHL2TRvAvL3NsDhSU7CVgA4ZvSeDenVt1UQ3wMuqG\r\nvAOcF1iUQDAXnvQz+0PfqhAL6+rY+7zMEa/jrCspm4Vvioea+ZwmaIngjEzR\r\nNhgZRmZRtS/sBluGEgdpuRtx7ZgHta6pkg2CD1wvcNUBRxZJhpE9bflh535i\r\nYqx4khw98ESTgXyIaR/5Gc6y36YhqZJjaIY=\r\n=T3Gi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"37054f067f41bfd387b92c87de6bff4e43638455","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20224205231","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-20224205231"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-20224205231"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20224205231_1653024215417_0.06892552994052736","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022421153722":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022421153722","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022421153722","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1926372844e8d981a139ec43356fc272c0a5905b","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022421153722.tgz","fileCount":17,"integrity":"sha512-a5ximO5aQ9fnXRTs72atpeJ+ZarCesFwNaQILdd7IdJRLA9jXSw/qK9z+YOoI/mXNa6c6bjgu4mZQjztqvBTww==","signatures":[{"sig":"MEUCIQDrX67oXNeK93OPXyrQ0VCkW8TzH8sXjRP1xkXCOqJAsQIgNmL/ffV2m3zAFxKxTTE0BrLHE99jX51muuaJ9jHKlCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiQdSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqjhg//dkq2gLmAKHYLJ3ebRLPflnqxNEr1Xgabv0hchNjD0meaTyi0\r\nDwmPz3OFhRk/rYFXjfAkn+ItwnKp151bHvsub7u+17Bf9sEhJQTaahgJr/8G\r\nCoB91LMXSGMEKZzqejSLsemdZ2ENUPdaldMbZQ3l+XVZHhDD5Tt68UQtYsB1\r\ng1TVhvsak0qQlox/GaaQzeUeg9xaavr4bwajuZQg/yuqtsGK0t1x0FgF9Z6Y\r\naH9ZygEcRf9T5XuHnqIppu0fzsNMxZOwAkNrKs4TagUEnG5EStrD1dwRp+9Q\r\nYYjlxywXwIqFi/2sDKB/PKg6BD1e7cGAQPP+EY8LCQtgUl8izBxVg+hznJj1\r\ndStzuuz6XfgwAAFBmx0IBims2HiPYNhgJ9pEK4GHewvwxYf1djF1F3duoFYW\r\nhhtG75QFizSEviLFUOCT/43QhIYoKESDntmgV9ZhGG15A/e73/3BvcqpE25O\r\nadl/ejLeCMwIeQQ27+PCQi7/UsjWeEfSfgRwW8TiEyEA+GA33fuvKjQ7tSio\r\nf5imgb4Sawo5kdUEqgrkJqOo1Ub2Tm8XftSQQOelOPzn2E6+Y31erAQ4QpdZ\r\n7WF6rDGD1ioFiSdP/NTB4Z+url2WbrzBZWFNUG0h+iM9xy7uvRknA9Z1xtlh\r\nkj4uilZaLsmKYbaWRqzgr3mgsPQTqYcqJ70=\r\n=rk1S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"47b0f3c1d446ec73146609bda3c2b19b367e9980","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022421153722","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022421153722"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022421153722"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022421153722_1653147474063_0.8180128011438188","host":"s3://npm-registry-packages"}},"0.0.0-dev-202242121518":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202242121518","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202242121518","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1f37e93eba58551de30fa6629065f77faa501260","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202242121518.tgz","fileCount":17,"integrity":"sha512-0JPgVtzAsmjjAamWpfveSkaEwkJX6+lK8R0r4U7DdS0Rn6RUH6mmmnKhCwlIiYiwXJwMskbdKGMyYSSt3+uExg==","signatures":[{"sig":"MEUCIQCb5kefy1Kvd98Gokn95SI0ilAj4ACUlc9R+KbNvvyZ1wIgEQr/Sk9Fs4X0ZDYHXYU3AvenLkc1cKUq3TomiXSqgbY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiVQtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmredxAAhlCfHJw3r8bc4wIwRe/BDxAdmy0vRCyB18mQY3yeOzHbb9qy\r\nnO40awRhVsWjkUmniKAU1uV9O17MvhZek0KeSQ2iHtvIDgzQYFKWo7DiTMj5\r\nLwGFd1kuSSUs1UHBIUeMlziHDlDkJxrVZZJWFkewSMEcBgdvtjbccP1ExbK5\r\nGCO+p96my2wzOMGVgbNVFn33PlmtyCxYT0+SxebH3Tf1kGtiOIuDomOfv08x\r\nUchz02zKXzERL4DjuRBB4zy22zQn+u0goCaj/0fe7O4yvL0SkSaVeotSk7AJ\r\nepNwuQhmAglsR2i0bJT9D55vhPMquaFQFFsZOOWD7iuE9TC4zQ15J5QFPW+r\r\na7TCd7WzctBwlJ93FN4w9ubJSslh72RUmDusJcK6hvk9W9xNZLNCo3HC017q\r\n1f4EWarxB4Grxnwf1udXdISnqDk8sSACF+L+Aj/hQ5qWS2iRh+ZLv2DpQFYM\r\nL+QiyVRf3uyunNrFnszI4KE+aRdOzx3r15GCLST2ynRiDftO1vLjUHYsRXSU\r\nTgdG5FhtHtiajk90z5gTyF0Sk9fgLpJVJuoSlTDTXigLY47ZkV1ZtOiIoRve\r\nrDEcmIc4ZRyPuAGiiRWJeI/rI9qYYTAGHw/ws2YJ5vT7YcwMZ0e6rUWVCnjA\r\nUCJhgzfTwJLlr26amqnR0KahWwlweSdfqX8=\r\n=tlE8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"7150626f047f6cd0f559acf8fb679e29eaf7247a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202242121518","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202242121518"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202242121518"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202242121518_1653167149340_0.09311732289144703","host":"s3://npm-registry-packages"}},"0.0.0-dev-20224239149":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20224239149","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20224239149","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9b5b8ba76fd339715cefee6ff607617f88cdce71","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20224239149.tgz","fileCount":17,"integrity":"sha512-c9ZO/cqY5+c93G6KIYEBeV9qFo+t4uL/23H/LAFWE8xBcDT6pFyWvps1zSj9Q6Kb0feWHvjszcFd7t5eCt9obA==","signatures":[{"sig":"MEUCIQDPyJwC65SJ17yvYpEEMnWc2RrAbLkCUzYhQdrmTbX4lwIgTK0srbJCNErBQqugX2uScL3w0t6oOeSoKjwlM2KBPu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii02dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrD9g//cOOWkQ9yLxd1Cd2M2Xb5bMaQquAvdgX1g4NHUpMl+93VYwSc\r\n9sgjQFyzUI/sfusaEEi45qdeBntl1uqjuDyItKW/9h37ZxbnRVtx4SdXWepr\r\nGuSI6NPXM9UWuyJ+jXZGYIbHcRSYv0oAlIyScHUynoLC/HmzQ+kCsO7TLOeb\r\nTYnAnqFbI5FYXLhPxt9nzLm6rId6vrP6ICEWrDg8I/hT/D3eopXHfyPLTbv7\r\n/dBEhs9fqAyrj0J7NljRrjvT1HhIegluIVDHlJioTMtayIouTiRsrEvXtCCu\r\nsabOOGvCIIqgrry35kXwCkMXza+/g2NaLzP/OTjp7OjjmvutROMuWibHpYYv\r\n1D/vqmeyjmV3XQQ+OKazdctC9E37T5W79JUqHEuohWlgSf62/mx1LTwCssvW\r\n9ofd+tv8SehPC1qC7JMicwVITkiBH66thFBY3jfdQ3jNcGJ/utWphx22BwuN\r\noJ9xW6NA9AM3KtSLcjeAO29DOfjdsPTSuBEWP8xZ1mHXISLPkvsIphco3JzA\r\nVw3/IL4GYKT+WyBq1O6QvUquYPgHuQGo+mC+yLI9JEA1achx1DSY+yxE+IoU\r\ntv5sShbRKl+2i/OOTd0SBYVCGiQlOuUaVcVq1gplBzdJ2AzzdtvBbGz/4b5+\r\nl1QS2knY78LGWBo4o3LLL6nqZwaA9Mb6ruY=\r\n=bn8p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"618037ec72af18957a3ca3de300049b784ae7304","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20224239149","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-20224239149"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-20224239149"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20224239149_1653296541507_0.9296026725156317","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022423113827":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022423113827","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022423113827","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"32d3aada19f33f3ff1f8eb9357c702c33bb9608e","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022423113827.tgz","fileCount":17,"integrity":"sha512-Wjv9mQjMNqe9/GyWSZ+i2MI+oi7dDOOvgjvb25D6W6KGgTLo/6zBYhVemvTnyTtkQ3YmBwQhJmXL66RyTS9FfQ==","signatures":[{"sig":"MEUCIQDGfwD1hjagZOTQZ6hha4j3Cv9K/mKOTQ2TOiIXcrLZAgIgFYYlb4be+d5y1h7/MRHHEQjf6EEYzmvkdKexzWSSIiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii3JMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoA6hAAgN2NGwcMrh4ColdafF8Yi0Nv2BpI1ZXBNso2B83AXhdSTF9m\r\nlmHnsFam2olQehDSUWQ5WZViW8a01molI3lq4euDhIvUfdKNVhK8mFdVzt9n\r\nh6VjCCFp8AZAk0ljf3qRh7q/JS0a52DDpEeSYanG0KGnDezwvNdkDrtjwdXW\r\nbVysR0XUY4obnIrB7E3dAKleBU1y83lpBD45PCsRaXk4FbszW5qrKZoqZ9Dz\r\nFaPknkYI1V/FxmTGDPjU4oLzRazo6IDVCXzbTWz5G20fbamTARJBhHvrxC0e\r\nazUG91yU0pBWwo5uLGjHZXey1quW41l9FpMd0aQMEQZ87xN5vJlbbcCXaud7\r\ndXhVEpZ2n7xj+6dPxnVaZDpJAnpfrSgTgkxOX+XZKhFw9nsm/2dN5/K+zPjG\r\nKscryIBeSXhEckNXwZjd8xV3GJx1E/w6nWnQctsFpgTYIaDrP2N4ZxHZaoSd\r\nfBjr/v0H8b4pYdojkhicFmcKDblijH444svLmSdYc3jlHPdVJ205UsWC00cU\r\nugqKkAIYjfxb1DyXhy7yasUL9V7w9+440qfGd8yihvQ/nQUT3SeZPZLBDhsP\r\nt8DnMdN+7UZ/N6xCzxNz+mzZ/7drMvBxkyx7twzQNWv+AWEpIBAoFebfNx2C\r\nW+0kXOABYnKyuEM9rKxP/mlhi07FqkVmmjo=\r\n=HmgJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"1026770a2b96b51a1a35f56c97fcbc42abbfb4d4","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022423113827","@chakra-ui/hooks":"2.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022423113827"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022423113827"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022423113827_1653305931953_0.5064783333668328","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022423121532":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022423121532","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022423121532","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"926448a706c65c4cef74b779a55341b7cf7f939e","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022423121532.tgz","fileCount":17,"integrity":"sha512-V49kocBdJQ+fziP2Ez7ZPDDoGUBeLv8Q1ikoTG5jm4JvPFtVCfBsovxNLCfbBNA5dWULjB3oUrr6zhIcvalKkQ==","signatures":[{"sig":"MEQCIAFuW2Aj0q7RwEKFDKe5OByyK1kEoigj45hR4K9bHD+GAiBDtVB4VogV1QJIl/eTDAsGCLdaLImxNv6sa0A2vQLoEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii3sGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouWBAAhWueaNQkl1F5iqIEQZ9V0bJrcBt/yxsfnkUs4IJGvT3WaQ3J\r\ntk5ZrExOowMjuvjFd1BOXcYsH3TknZKgoYPENmvtpGvZ4IpP1mUUom6GRRVw\r\njiJ1WzJBo9Erd/NUxf9UfQLx+cWyUZiKOpVhHEjPBOecjDUgLjlHEiBFRP4O\r\nznFEollSRVH49JQtX9I8srHzGHr3mDiqyKX+K5edk6JWmGAuS6y3nf2g7YI/\r\nFZ48Pl+n40JDjSTDdzokt0GyY12nNeZ4f8fwz6jafbyom1LHChzFNPuojhA8\r\nZm3sCQF3vhZ1YszIQhcBtF2WIa5kDh64Fm7jPPIlvt+DQC1XCkSmKgCu3VJB\r\n/iDNuVQdDtJIam0+v+ANsIRohy/DG2QHcurKkYPtOH5vjfBBYTsUvJKTTa17\r\nXmfH51GR6ARyis7BgW956s8vjyX4b/E5qH0zIhc4AcjPzIkAhA+NFGq9Rf4s\r\n/+j9ehTaK3sVr4VD3/f6Xq6vZw3o7W2Lh/U5WN4rIxfH88jPdTWoWBio2YCV\r\nbUEAva1qGQJEyuERlwLTDo9/f5w4FDoyVZJEM+1Wc11CValk9rZzdKcQcW+u\r\nWhuKcHgEAnMrOYhmGKB9meXAD/QUea3x3VzK1gBAU0f5WOrsYKnPO/kqIGui\r\nhg+vRJ8Kh2ttdwIf+EnW78zGRGMepSyalJA=\r\n=g9mk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"35b4565b04f75dc5d3874846b65260be849d08ae","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022423121532","@chakra-ui/hooks":"0.0.0-dev-2022423121532","@chakra-ui/utils":"0.0.0-dev-2022423121532","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022423121532"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022423121532"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022423121532_1653308166079_0.7498060102677693","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022423121615":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-2022423121615","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-2022423121615","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"026fd3da970be6ad3f4b50246b46ddab8a128432","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-2022423121615.tgz","fileCount":17,"integrity":"sha512-VG75joZOy/EqhPQrgWKVQ8BemzP6kCL1miE8qjKcoGVLf/tGasmlzjmIJEcabQG8erONVPuXh3GQexM2uyO68A==","signatures":[{"sig":"MEUCIHTv6eL7YKmkmfXq0sQmcZw+dTBB1fBiUcI3i2OhvX2ZAiEAq5WNnfxEbCARTsbneNILYNeefOZqlRLT38GNirw5seI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii3swACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKihAAjQodDxMzxzokLlu+Phk8OAehuJ8Ksaq4MkjD1mNFUSD6oShX\r\nwcU+to5WSvGuUjpQcHpvbREESItlfaUnc/13rFIlpSjZwmFQZeJ8O6T/UWLw\r\nyLZCC1hGMwumJsP2UMpgsANADOGNK88+FPD+uWaTVHOp7Hc/DHvWz6MnLXR/\r\n0zv9AYqgrfrT1vKgunev2Y7T+bojUxME7XUAG/urMFmIaosmv4SeqnNo+teb\r\ns7CH+xj54kMqCSFy6VuyDyiq1lF9aJY0x/5bc0LDeXbe+6lyivnTT1lXkdBs\r\nsdDGqOy/9uATuf8SItmp2hu7a4EuBq1l8ls8TFVnDKL5rUPruJ8JRD37SpuB\r\n1ecKCP8Hkv+JSbSzVb8O6snhZiXG/Lr/128GhkO8s43McwA/4ZFQb1Ntsdrp\r\nnitmmRguHsp9A6G1HSlPsZ2Dovh6dwbG+e79Z+Hlhf5VRIsrsfJ816ELxKRM\r\nGbN3jJtvK61J235zttNviKsN319+inYrwWBtjl+2VA82rFNJB286MZkrZ538\r\nTGgOyNIAl7qWFxdf0RapLQrspCV9Bp37cpdiXK/h6CGrzNN76H/GbWrv1fHJ\r\nJGZFMYwcgy1DCAWDuBwtLItgqP4iYC0SWw2qxfttuzQScKjMgZnuxHDUxaA/\r\nNd+9SI4Yth1IH+46De2xw+X/2F076zQAwLs=\r\n=CDAZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"38452854419b6a8f651d073c02c89fd9e4520158","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022423121615","@chakra-ui/hooks":"0.0.0-dev-2022423121615","@chakra-ui/utils":"0.0.0-dev-2022423121615","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022423121615"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022423121615"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-2022423121615_1653308208451_0.8110575935099904","host":"s3://npm-registry-packages"}},"0.0.0-dev-20224248246":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20224248246","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20224248246","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c63b64085ab182406d74579193ba7a99b138b0c0","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20224248246.tgz","fileCount":17,"integrity":"sha512-tX7vOrDpPxph7X4EbzovRC6jUbH7jkCqpyBR/36u2suEPstmwJ/e60sLhG34mt6hDnnBqhMmg4RJN92l/lLklA==","signatures":[{"sig":"MEQCICSU/vnj7EFW065XjEQx5y/zQRdo/MVa+Blg8+PIpN1+AiBIYYCU4hsBpLW0fI4UVWqN6vNM1N6FrgGEEiA4JmuOcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJFGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojHxAAhE7donzovnCDfGUW/kThsLtJGsYehnp6igVrOgbYLGVXBUgL\r\noye7uDQzrEzviMdRI6PYPCk/PgojOgNaqLiep+oD+10k7pZG2fxNkM12xFsI\r\nBvaA2TTtzxcP2YbmObmaplM5nT0nwWo1+bn4uD2/Nw+hgNoUnvnlJKy6IYLg\r\nKmTbxsjg4UUhB+H+OEtKllXqlS8nHgJPmA+WJaVxM28DPJOurIGJnBAeKHf0\r\ns3VReGshQD35k9ClC7GU8OsJjqfIQePkfqOrhlLxth3a4g6lhXUUNV2BwBRx\r\nAl7JFgwpKbFVj90/rRYFDT6A1yrZn66JYZv4x6ExUF655WAn9IaeePNIJevv\r\ng1gY1EZn/PeeRVLiYCU2ZZcInD04d5QWlgom8MFf3OhZnPv1gNCJyoVdPqid\r\nE321hhwkJFOEWjCBm4ZoCalfF4seyqI5pjLLb7Pn5xmbXFyEgaJWsC5OwIg2\r\nIuXi+1V0gFSYWLy0WuJ0IoHSUIrSh8XVjIycnxO7HHWaxe97J+mAi+UR6g65\r\n4Xl2HEW7mnUwwj2CHJIMBpv3Hv/36pr3lfUzRsdqyItRxI6tEEMHIlVk1u3Q\r\nXB3iQLlh8jvqoRWvc3TyCNqgYNLIQH5hqMCV3qzRKk2BnFULdGIu/mXhhzXK\r\nfaFc+G3bwxBUpxLB3bs9Rd7svhvUn7Ng0ho=\r\n=D7Ng\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"6f1921d44b496e518b2691cbd62cc45a6135d1f6","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20224248246","@chakra-ui/hooks":"0.0.0-dev-20224248246","@chakra-ui/utils":"0.0.0-dev-20224248246","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-20224248246"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-20224248246"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20224248246_1653379398791_0.245853945182112","host":"s3://npm-registry-packages"}},"0.0.0-dev-20224248516":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20224248516","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20224248516","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b6b975848fe51283cea2963a4c85f54265ea213e","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20224248516.tgz","fileCount":17,"integrity":"sha512-PIBY0kFQKQ198LGP/oCYJQ4doWId3HzQh6df5akRbdWLiGJHpOR/YypSgR5P4iKCApbKr96DItmfZeSsxVzTAQ==","signatures":[{"sig":"MEUCIFL+r+s6pdU4YSPDZi7Uv85xWZDaB8+JaPl0Rlf+NK4UAiEAkOLWoASSicOnZm4W5suVwZLsFBk31BxpwwNiN0sykWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJHbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7qw/+MvmbLByMqNXAD/u6wJjNsrvlQaQ6M/2w3ntF+EVGrQbhleZp\r\nfUfsCNUKsXp2/t6RT2fnMYvArfIkWs+FrDkwXdwIQ2AedJsjS6ev7kUkidgH\r\nokhHAPpgAXsCnWwML61jMLjOLM8UhI7KO01feLeBz+bK5GTCJ+iKxpwP0tcq\r\noy3uCihbbjVuM27WwBzhWZz48xh0LbTn60Cv8PflbgRJiIINockgWVXAWhLO\r\n7iz3QCqFcrl0jVmWgvGtLP1Etd9RbtRq8ds+DsDopqEsnFPMW4YoavRxXnnH\r\nr6Mp1Jb1DeE4KrNMdHCBddsc5h3wCDWv1JJTom+eLbp2nyizmbqZz++Iq0Yp\r\nmm/2Gblsw4gTa/QOtVaDIrBA9miJkLasMO/9j1/oAfxS91rR9YXHKRcKPqqF\r\nNhcig4ZvVYN61IcFiRvQ9wB1QiFMoHQiuCnUliO5bz67KQRwR5Z7MWq8pW60\r\nb+cUfk8FMIlTOoTFwgZxemwSeqxm2ffLOfvR0b5wSnQxjYI27N6jGyexMhi8\r\ngE5aF5osiFOifTumzc9kwtwNwSEXNqslltC1iqNwMG0l7Unwxox9kvLcqnHN\r\nmbt6pzNOYTflfWhtg4YIykhhjEVndkFgbEIfmhUV98OGaS2lhQug0m2xWgDB\r\nQ+6Hm/xXxKl7NdhKs4iTGw6udcDttF92kFc=\r\n=JkhQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"f5839d1015edc4f3525bc74ab2cf5d9044139fde","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20224248516","@chakra-ui/hooks":"0.0.0-dev-20224248516","@chakra-ui/utils":"0.0.0-dev-20224248516","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-20224248516"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-20224248516"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-20224248516_1653379546922_0.4709690646964486","host":"s3://npm-registry-packages"}},"0.0.0-dev-202242481651":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202242481651","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202242481651","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2e8c58eabc0c78aeff3f07143043e6e08327bfa9","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202242481651.tgz","fileCount":17,"integrity":"sha512-F//kuLFoi+MmPKn7iC9F/2UB+z/sSIKYiK0J3g4t8i158rNGGCuUxsiSQqh0EbVKdoMivWqZqEX3H1Y1lXBm2A==","signatures":[{"sig":"MEYCIQCEHlQCdQgm4hvZMOWaR8anok9FE/it4E7ddhl41QRF5AIhAP+4oVdDPL3B/AQOkV8BNT2Vb27gfJ2vOk9a2mGzKMrE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJSTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZExAAhg51Ay9LhgUJZsp7h1p7Jfzin7nG/iICcKDDALLeePsypBjG\r\nKZ62iK8mJ+GQ6zBgcHwmeriJsZX5B7nIzZ2BK/KvW5847LjuE7fcHsFfHR4b\r\nABuYX8IT1uUrhcBs1WSckun45AFITrX0t7JeI65bpjzaCSZyvsc46U4mv8W+\r\nw8yelCrk18ngfsOUbsJKd4GnoJ7N3xKXYJm1Boz46ath5SdMesOTfwTYrBNB\r\ncnTzl9iBoAWCVhPYNJTzKM674iLWACMxVYZOe52x083aVwYiaTFtb6zMDHkl\r\nFHwMlDw9viSJnjdNEi4SDWVVfr22KldvgAqCfQpZ7UThN1Gi2F5wDxdYDwJr\r\nChI+59FEPWpr/BJ8BdzjNA73R/qikE0IXDsdgeyWxIHKlDp/dVley5hu4mh8\r\n+6xJ88lasPcykoSuUgOuah+8qt4n3GOl9Ni0ydfUBjtj+pG+Ywm6/JUaAZV+\r\nTqwkw6Ud6oLoH2TXzuCz2VhJpUyrOKstR/EsTDIsWTpYtb7D6Wd2FYrrBugY\r\nFGioKYhF36l7WzAT22MRpKbJPf4W2lMklZYOTj4ALOaabuFyNKMwFPUxdtaO\r\n5llhrhXN7s0wOlfp6hjRGVxKsbMZhXMXTxs693uNpCL5vhWkPSEvNU4uHcY4\r\nt/jbWItMtePZAKXHT0acCa1fHTMdeOiu3Vk=\r\n=J9iz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"e8cce77b27714277db576b45d03d2570d590ab8e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202242481651","@chakra-ui/hooks":"0.0.0-dev-202242481651","@chakra-ui/utils":"0.0.0-dev-202242481651","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202242481651"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202242481651"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202242481651_1653380243130_0.3377067318634346","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@chakra-ui/form-control","version":"2.0.1","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@2.0.1","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7d9011d270ccaa090da48c6703a797c91183eb36","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-2.0.1.tgz","fileCount":17,"integrity":"sha512-j7pmUux478sEmmTsOJk6C69xCr9Bfu1xmaW6VqmeNDo79PhtQbXa3M2uj4goCLqGkjONlhDMNkN49dCEaBbEAw==","signatures":[{"sig":"MEUCIHgDKMlLlWqOeI7IXqsH60QsXD29ojYa7y9eINk6AuFGAiEAmGmmbYzBUZqwGsD4Td96LQtogsKzw8dS9dFRsG2UEeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijM9dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsDQ/9GXeKlhWCGCCdAkKFVNLDJoD02LcaIT93IKjOu3KvK21lm97s\r\naSFfhDJVi5F4KBTSUxT8K8IMDiCzI/6MeieitcgaX7Q8VumuiNeqKHJ2F/Dx\r\nn7MHEAyDRxFgc1R4HVtPggjl5dhH0zRQO2mBBMkjr+jpiyPW9nSsLd2zuGaS\r\n1W/ZplSmZhu/vQkTN3zlORSY+CHmQIYhzubciXi9RW8Wiiqj6R747sIc54pl\r\nBusYglvvaBAmz+loCg+1WLSKsjuCjnPC2ixwQaMz3ARF6eX1lum6hIJT5oM1\r\nbBvMZTk05OKvOKQLoJDkYZWIUkGi1d+BjRHB2TMLUTPcpUgE5nIBCduVbACU\r\n8VOG6NrZvLKsW9nMQmfBwTDz4OTQ+ZmhbPs21pFLByx+j9JsGXNAYbM13Rf1\r\n8gSkUvaailLgZouQCf8AO004sULEO/Ii/iA+fj1yqiBBCa3c+9LUskihzFCb\r\nYLqUcUHrzUG6wpxdK+WOny1jM06Xpaq6EQgaTkBXZelQ0qUxYaDVjUtAaczK\r\ns6GyqjxMbP8qmwVzAtkh72ZqKWQD6zztXd8RMB4avmAs3V8NQL10YIccTvS2\r\nFh1mCZH/xqrpRIURHBsanHHtWFaRbYSeqCvkMk81iR4z6B5+njio/qFLkKce\r\nzRGtWwXulI60qNZsyp0ZjkO/Jn42JeXx+U4=\r\n=oT31\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","gitHead":"6375f5227d4482ad6d23852454a3792ba1cfc262","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"3.0.1","@chakra-ui/hooks":"2.0.1","@chakra-ui/utils":"2.0.1","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.1.1"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/form-control_2.0.1_1653395293580_0.31580009252324626","host":"s3://npm-registry-packages"}},"0.0.0-dev-202255105723":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-202255105723","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-202255105723","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d1d21470c7d08097c420f1f5b4e0cea327ab15cc","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-202255105723.tgz","fileCount":17,"integrity":"sha512-rzO3UvcYIytnGWdeIGc0mjRR3aU08pIC0YYdZS3x8D3TTalPXHb2AzTCC4f5weRcb5kGNboTwl+op5NwC+CtKw==","signatures":[{"sig":"MEUCIQD+XxCD5A+UrucJumSLLZ7j52HHlFXx75j48WQoJDUTGwIgI1FQXYh1lj6hufr5Y3Ci865OHJ6xMMdsR8wNF7QaMNs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62733,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinIwzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEBA/+LFMnp/9rbicGdDd/kmbnQt6gSRQQ1vqX9yeTaclNgQ0S69+Y\r\nh7LA3mNbLYe6Sgw8d/NI0SV1CjmSdm/mrHegoiSpvx/iBEpdVqQd491hf7dA\r\njkUZB6E9GDcRN+QdMhs4YKkKRw9ocfHtiR6QuoMP+SSdcLouGqAcQ/qSE6gV\r\nSIfZe/odSx/P7nxY4uMOMYMOWj6X8vGMovh5c9YrGB/JdGRZb1r4gkIi9xdv\r\nFryfgp2NWhMjgpnkWKkYuuzLx6uRNZNnTmcW6DAXEMZ/TOlNtLZkk/k7PKrt\r\nveakJuRAiBMuSeGSf/VPr/ZroaDUYbLJmQCGA3r6iHZHflySq1K87RGWL1qT\r\nkpeTDs4XpOBDi2fdAkZF7kRKIHAnzPseAVSrnuFnT2HaMT0hA2JavjRZoAIK\r\nweecEINZKM+Do1xNNAp5c2P6XpBAm8uX4HKm1A6tXhpBR7KXNksduB7zNJwe\r\nCgeJIoeJFLq6e3a47g5mbEwjin8ml8kZLqnWudR15AxQFzz+b2GLXSndnrVk\r\nN90LkMRqdJSRn6EsJHj4plhmm4cIRQxtam5UMoz8v465v9Lce8hvJC1InkBe\r\nWycGu9BJfzTinn1mc/VtV2WjQyRSvrA/Ar22VDPYYJ87Lz8nI+QKqx3iaYTE\r\n9GjS8yryJ48Cif/RvDJmjZyRFFmICP7TGyc=\r\n=OqoJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n \n \n \n\n```\n","gitHead":"7746c3c6c82803e7063bb3ba62d4d1f35183102e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/form-control"},"_npmVersion":"8.5.5","description":"React component to provide validation states to form fields","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202255105723","@chakra-ui/hooks":"2.0.1","@chakra-ui/utils":"2.0.1","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202255105723"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202255105723"},"_npmOperationalInternal":{"tmp":"tmp/form-control_0.0.0-dev-202255105723_1654426675300_0.0012206136270560553","host":"s3://npm-registry-packages"}},"0.0.0-dev-20225517307":{"name":"@chakra-ui/form-control","version":"0.0.0-dev-20225517307","keywords":["field","input","input group","form","theming","validation","error","react","chakra-ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/form-control@0.0.0-dev-20225517307","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f82f3cef486509713ccb8fd6c60055a957f3970e","tarball":"https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-0.0.0-dev-20225517307.tgz","fileCount":17,"integrity":"sha512-BRTMFyzsc+41sHNiNLqZBMkPMO2ZeiM1A5l9GKFgWoNYGvSQeQdYS3filykDba7RVjNTwSE5cmmW6wwYjIbnFA==","signatures":[{"sig":"MEQCIHnk41yIpiO2QK6mmpbTk8aFhwYGXYZiybJGmthQSZ9sAiAtJJIeDMa7+hnyK3DHPmgErPxO+/k9acbiE47kead0UQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinOhJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYTA//afEQkFdTw2Ua72r0kKDRfjPNgnKT+wYAMEzwyrV4S3hf3Sgy\r\nKO2mEGYoaGVIkD65LXnNOjWA27+kwRDgtlXnOXV9X2Nm2jPzOGikHb91V6r8\r\naZ92LaI376goLhIltyHUhxGXGDKmFWXUyAzrBI7xQlqXaHRWR+iZaqZjudoQ\r\nyDtOglPoZsUvalErnb/XlN6BM8nw0ljEzPhR07YtStYut+N+pcvYYUaBeUgz\r\nZBKY6xFFDs8DkTipxIhI61YKDTbSRTmBTivSIAgJf0kopyo6EtCu1OuZVpCb\r\nZ+J/Yzp6Y9uZMcp0GQJgRr3g2kvO/Mz5xRWcFNjmccHaeuN61d/J6gJwfUIn\r\n457OSoMB+2vJFlLHKp43a1wa2ToywpvnU7UjTQ+hU7foOwdTxHxW+tcZ331T\r\n6uy0cb5niLazz/0bC/9/w1IqNJCKsI6EdfjoJMce1MAYLXL6SEunsqvFipwq\r\nACUMn7lfaABV2N+KwKDYsVCqLZYTvRNl2EyJu6NrYnqcFbhLpF6NjFcBqywd\r\nu/3h2YJzVRlddT/wX/AgSUHp1pVjZJJlGm7K85Jcm625cKpFLUQBnvKrpgvA\r\nJefJH0a8Fwi5PRO7Oj6l0/02ldrg3p1iv9O8c5fGUzl8U7+yyKzCOCw7SpAW\r\nQDHy0ptmvSss8OwTTxH8lIuMgltIqeS9mB4=\r\n=VHfa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-form-control.cjs.js","types":"dist/chakra-ui-form-control.cjs.d.ts","module":"dist/chakra-ui-form-control.esm.js","readme":"# @chakra-ui/form-control\n\nForm Control component is used to manage form controls such input fields,\ncheckbox and radio buttons. It provides components and context that make your\nform fields accessible by default.\n\n- **FormControl** - the top level component that provides context.\n- **FormLabel** - the visible form control label.\n- **FormHelperText** - the form control's assistive text that guides the user.\n If added, it hides when there's an error in the field.\n- **FormErrorMessage** - the form control's error feedback. If there's a help\n text visible when the control is invalid, it replaces the help text, to\n prevent content shift.\n- **FormErrorIcon** - an icon that indicates the error state for colorblind\n users.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/form-control\n\n# or\n\nnpm install @chakra-ui/form-control\n```\n\n## Import component\n\n```jsx\nimport {\n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n FormErrorIcon,\n} from \"@chakra-ui/form-control\"\n```\n\n## Basic Usage\n\nThe `FormControl` component automatically provides the `id` for the input\ncomponent to be fully accessible.\n\n### With Input\n\n```jsx\n\n // automatically gets `htmlFor`\n First name:\n // automatically gets `id` and `aria-*` properties\n \n // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`\n Keep your first name short\n // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`\n First name is invalid\n\n```\n\n### With Checkbox group\n\n```jsx\n\n Who is better:\n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Focus, Invalid and Disabled States\n\n- When the `Input` component receives focus, it notifies the `FormControl` and\n adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`\n to style this state.\n\n- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and\n adds `data-invalid` to the `FormLabel` so you can change the styles of the\n label.\n\n- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,\n and adds `data-disabled` to the `FormLabel` so you can change the styles of\n the label.\n\n## Changing the required indicator\n\nTo change the required indicator beside the `FormLabel`, simply pass the\n`requiredIndicator` prop and set it to your custom indicator components.\n\n```jsx\n\n \n Who is better:\n \n \n Naruto\n Boruto\n \n C'mon! You must select one\n\n```\n\n## Adding a Visual Icon\n\n```jsx\n\n \n \n \n