{"_id":"@automattic/form-components","_rev":"200-50e4686810086cbae9b316f92bbefbbc","name":"@automattic/form-components","dist-tags":{"latest":"0.1.0-alpha.3"},"versions":{"0.1.0-alpha.1":{"name":"@automattic/form-components","version":"0.1.0-alpha.1","keywords":["wordpress","react","form","components"],"author":{"name":"Automattic"},"license":"GPL-2.0+","_id":"@automattic/form-components@0.1.0-alpha.1","maintainers":[{"name":"ockham","email":"ockham@raz.or.at"}],"homepage":"https://github.com/Automattic/wp-calypso/tree/master/client/components/forms#readme","bugs":{"url":"https://github.com/automattic/wp-calypso/issues"},"dist":{"shasum":"db9bfaf797dc5751800ea237a38079bfc1f8d340","tarball":"https://registry.npmjs.org/@automattic/form-components/-/form-components-0.1.0-alpha.1.tgz","integrity":"sha512-vpWj93vmTcUJfZrIh4CGf5Xs4bBGTtIFdE96hn2i7nN7a8G6k50jM+ht60K07Gebakcc0CJsTDnLcWlQEXgHpA==","signatures":[{"sig":"MEYCIQDsSSf2AZa/7Roj7RQh5tIIsHBvDzI4DJRYGvNimknIGQIhAKA9lRLJtYWWHnEM87kvYY40tN3iKnAuRwUIjO1Kk+Ai","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"db9bfaf797dc5751800ea237a38079bfc1f8d340","scripts":{"test":"run-s -s test-client test-server test-test"},"_npmUser":{"name":"ockham","email":"ockham@raz.or.at"},"repository":{"url":"git+https://github.com/automattic/wp-calypso.git","type":"git"},"_npmVersion":"3.10.10","description":"React-based form components, as used on WordPress.com","directories":{},"_nodeVersion":"6.11.1","dependencies":{"react":"^15.6.1","classnames":"^2.2.5","prop-types":"^15.5.10","i18n-calypso":"^1.7.4"},"_npmOperationalInternal":{"tmp":"tmp/form-components-0.1.0-alpha.1.tgz_1501589594297_0.3595775116700679","host":"s3://npm-registry-packages"}},"0.1.0-alpha.2":{"name":"@automattic/form-components","version":"0.1.0-alpha.2","keywords":["wordpress","react","form","components"],"author":{"name":"Automattic"},"license":"GPL-2.0+","_id":"@automattic/form-components@0.1.0-alpha.2","maintainers":[{"name":"sirreal","email":"jon.surrell@gmail.com"},{"name":"ockham","email":"ockham@raz.or.at"},{"name":"a8c","email":"vip@matticspace.com"}],"homepage":"https://github.com/Automattic/wp-calypso/tree/master/client/components/forms#readme","bugs":{"url":"https://github.com/automattic/wp-calypso/issues"},"dist":{"shasum":"b904cc7e95793ea75f390dc5f517ec61d1f895e6","tarball":"https://registry.npmjs.org/@automattic/form-components/-/form-components-0.1.0-alpha.2.tgz","integrity":"sha512-ms0vm0mpqQUulSTqiqoOu/s0XvS+Q5d8LpjYm9Ra12coIQFy9ThFUBSmbb2uqCeeV22lueJZA/Je9Q//Jmq7ng==","signatures":[{"sig":"MEUCIAVzU7/70uqdthYD8O6TIg7PjHQYfJntcU/1n6sd/R+1AiEAxtkDozqoSM5ntrDBBp5RoEddTAcMGXooc6heG1ZTrkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"b904cc7e95793ea75f390dc5f517ec61d1f895e6","scripts":{"test":"run-s -s test-client test-server test-test"},"_npmUser":{"name":"ockham","email":"ockham@raz.or.at"},"repository":{"url":"git+https://github.com/automattic/wp-calypso.git","type":"git"},"_npmVersion":"3.10.10","description":"React-based form components, as used on WordPress.com","directories":{},"_nodeVersion":"6.11.1","dependencies":{"react":"^15.6.1","classnames":"^2.2.5","prop-types":"^15.5.10","i18n-calypso":"^1.7.4"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/form-components-0.1.0-alpha.2.tgz_1501666717938_0.0936948845628649","host":"s3://npm-registry-packages"}},"0.1.0-alpha.3":{"name":"@automattic/form-components","version":"0.1.0-alpha.3","keywords":["wordpress","react","form","components"],"author":{"name":"Automattic"},"license":"GPL-2.0+","_id":"@automattic/form-components@0.1.0-alpha.3","maintainers":[{"name":"sirreal","email":"jon.surrell@gmail.com"},{"name":"ockham","email":"ockham@raz.or.at"},{"name":"a8c","email":"vip@matticspace.com"}],"homepage":"https://github.com/Automattic/wp-calypso/tree/master/client/components/forms#readme","bugs":{"url":"https://github.com/automattic/wp-calypso/issues"},"dist":{"shasum":"03bef90e0f2a7863e2e5c15f850c090eb8299152","tarball":"https://registry.npmjs.org/@automattic/form-components/-/form-components-0.1.0-alpha.3.tgz","integrity":"sha512-U8iMmg1eL53gs8nD7hDvVBI+n1RWMUDuEcvQfCxz+R8cwbJxdpAs7dmuzlw92iOao5zctbbGgrYcLytmvG9GRg==","signatures":[{"sig":"MEYCIQDoUsNpZ8UKTboaTMwJgb0gfO0md1NyTpqgn5gVi8c3uAIhAKkIVEpA4o510qCVMAYhKmmGCXq8OUVxIy5XkAIMqgap","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"03bef90e0f2a7863e2e5c15f850c090eb8299152","scripts":{"test":"run-s -s test-client test-server test-test"},"_npmUser":{"name":"ockham","email":"ockham@raz.or.at"},"repository":{"url":"git+https://github.com/automattic/wp-calypso.git","type":"git"},"_npmVersion":"3.10.10","description":"React-based form components, as used on WordPress.com","directories":{},"_nodeVersion":"6.11.1","dependencies":{"react":"^15.6.1","classnames":"^2.2.5","prop-types":"^15.5.10","i18n-calypso":"^1.7.4"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/form-components-0.1.0-alpha.3.tgz_1501755456689_0.14048574841581285","host":"s3://npm-registry-packages"}}},"time":{"created":"2017-08-01T12:13:15.487Z","modified":"2026-09-25T20:24:01.821Z","0.1.0-alpha.1":"2017-08-01T12:13:15.487Z","0.1.0-alpha.2":"2017-08-02T09:38:39.001Z","0.1.0-alpha.3":"2017-08-03T10:17:37.759Z"},"bugs":{"url":"https://github.com/automattic/wp-calypso/issues"},"author":{"name":"Automattic"},"license":"GPL-2.0+","homepage":"https://github.com/Automattic/wp-calypso/tree/master/client/components/forms#readme","keywords":["wordpress","react","form","components"],"repository":{"url":"git+https://github.com/automattic/wp-calypso.git","type":"git"},"description":"React-based form components, as used on WordPress.com","maintainers":[{"email":"maciej.brencz@gmail.com","name":"macbre"},{"email":"yuliyan.slavchev@gmail.com","name":"yuliyan"},{"email":"batmoo@gmail.com","name":"mjangda"},{"email":"jetpack+engineering@automattic.com","name":"matticbot"},{"email":"invoices@automattic.com","name":"a8c"},{"email":"ben@blowery.org","name":"blowery"},{"email":"chris@ehg.sh","name":"ehg_"},{"email":"mail@sgomes.io","name":"sgomes"},{"email":"tyxla@abv.bg","name":"tyxla"},{"email":"sarosh.aga@automattic.com","name":"saroshaga"},{"email":"nejc.lovrencic@gmail.com","name":"nejclovrencic"},{"email":"payton@foolord.com","name":"sirbrillig"},{"email":"chris@zarate.org","name":"chriszarate"},{"email":"robersonccgomes@gmail.com","name":"robersongomes"},{"email":"johng75@gmail.com","name":"johngodley"},{"email":"jeremy@tagada.hu","name":"jeherve"},{"email":"dale@automattic.com","name":"daledupreez-a8c"},{"email":"todd.wright@automattic.com","name":"t2dw4t"},{"email":"luis.mulinari@gmail.com","name":"luismulinari"},{"email":"andrea.grassi@automattic.com","name":"andrea-sdl"},{"email":"elazzabi.ahmed@gmail.com","name":"elazzabi"},{"email":"fernando.fernandes@automattic.com","name":"fmfernandes"},{"email":"jon.surrell@gmail.com","name":"sirreal"},{"email":"volodymyr@wildwolf.name","name":"wwa"},{"email":"chihsuan.tw@gmail.com","name":"chihsuan"},{"email":"manzoorwani.jk@gmail.com","name":"manzoorwanijk"},{"email":"matias.emanuel.surdi@automattic.com","name":"msurdi-a8c"},{"email":"newspack@a8c.com","name":"newspack-npm"},{"email":"derek.smart@automattic.com","name":"dsmartg"},{"email":"kavin.keratikasama@automattic.com","name":"kthai15"},{"email":"berislav.grgicak@gmail.com","name":"bgrgicak"},{"email":"robert.sreberski@automattic.com","name":"robertsreberski_a8c"},{"email":"artur.piszek@gmail.com","name":"artpi"},{"email":"jugergo@gmail.com","name":"gmjuhasz"},{"email":"borkweb@gmail.com","name":"borkweb"},{"email":"kat3samsin@gmail.com","name":"kat3samsin"},{"email":"b.basto@gmail.com","name":"brunobasto"},{"email":"douglas.henri@automattic.com","name":"dhenridev"},{"email":"m@mrmurphy.dev","name":"mrmurphy"},{"email":"platform+npm@wpvip.com","name":"wpvip-bot"},{"email":"e.tobiesen@gmail.com","name":"etobiesen"},{"email":"omar@omaralshaker.com","name":"alshakero"},{"email":"arthur791004@gmail.com","name":"arthur791004"},{"email":"peter.petrov89@gmail.com","name":"dilirity"},{"email":"npmjs.corporate906@passinbox.com","name":"mehmoodak"},{"email":"natalia.vidal@automattic.com","name":"natalia.vidal"},{"email":"ivan.ottinger@automattic.com","name":"ivan.ottinger"},{"email":"anand.nalya@gmail.com","name":"anandnalya"},{"email":"anthony.arcangelini@gmail.com","name":"arcangelinis"},{"email":"rdsuarez@gmail.com","name":"retrofox"},{"email":"mayank.chugh@automattic.com","name":"iamchughmayank"},{"email":"mikael@ihminen.org","name":"simison"},{"email":"fredrik@fredrik.computer","name":"fredrikekelund"},{"email":"griffith.chen@automattic.com","name":"griffithchen"},{"email":"josh.boland@automattic.com","name":"jboland8"},{"email":"chriskmnds@gmail.com","name":"chriskmnds"},{"email":"ola@oandre.gal","name":"oandregal"},{"email":"galatanovidiu@gmail.com","name":"galatanovidiu"},{"email":"kangzjnet@gmail.com","name":"kangzj"},{"email":"lena@jaguchi.com","name":"_mirka_"},{"email":"andrew@andrewduthie.com","name":"aduth"},{"email":"emanuele.buccelli@automattic.com","name":"ebuccelli"}],"readme":"Form Components\n===============\n\nThis is a directory of shared form components.\n\n### Settings Form Fields\nThe following form components were created as an effort to minimize duplication between site settings and me settings.\n\n- clipboard-button\n- counted-textarea\n- form-button\n- form-buttons-bar\n- form-checkbox\n- form-country-select\n- form-currency-input\n- form-fieldset\n- form-input-validation\n- form-label\n- form-legend\n- form-password-input\n- form-phone-input\n- form-phone-media-input\n- form-radio\n- form-range\n- form-section-heading\n- form-select\n- form-setting-explanation\n- form-tel-input\n- form-text-input\n- form-text-input-with-action\n- form-text-input-with-affixes\n- form-textarea\n- form-toggle\n- multi-checkbox\n- range\n- sortable-list\n\nThe component jsx files are wrappers that ensure our classes are added to each form field. Each form field component also contains a `style.scss` file in its directory for styling. These stylesheets are included in `/assets/stylesheets/_components.scss`.\n\n### FormSectionHeading\nThe `FormSectionHeading` component allows you to add a section header to your settings form.\n\n### FormInputValidation\nThe `FormInputValidation` component is used to display a validation notice to the user. You can use it like this:\n\n```jsx\n<FormInputValidation isError={ true } text=\"Usernames can only contain lowercase letters (a-z) and numbers.\" />\n<FormInputValidation text=\"That username is valid.\" />\n```\n\n### MultiCheckbox\n\n[See README.md for MultiCheckbox](./multi-checkbox/README.md)\n\n### SelectOptGroups\n`SelectOptGroups` allows you to pass structured data to render a select element with `<option>` elements nested inside `<optgroup>` separators. You can use it like this:\n\n```jsx\nconst options = [\n\t{\n\t\tlabel: 'Group 1',\n\t\toptions: [\n\t\t\t{\n\t\t\t\tlabel: 'Option 1',\n\t\t\t\tvalue: 1\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Option 2',\n\t\t\t\tvalue: 2\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tlabel: 'Group 2',\n\t\toptions: [\n\t\t\t{\n\t\t\t\tlabel: 'Option 3',\n\t\t\t\tvalue: 3\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Option 4',\n\t\t\t\tvalue: 4\n\t\t\t}\n\t\t]\n\t}\n],\ninitialSelected = 3;\n\n<SelectOptGroups name=\"example\" value={ initialSelected } options={ options } />\n```\n\nAnd this would render:\n\n```html\n<select name=\"example\">\n\t<optgroup label=\"Group 1\">\n\t\t<option value=\"1\">Option 1</option>\n\t\t<option value=\"2\">Option 2</option>\n\t</optgroup>\n\t<optgroup label=\"Group 1\">\n\t\t<option value=\"3\" selected>Option 3</option>\n\t\t<option value=\"4\">Option 4</option>\n\t</optgroup>\n</select>\n```\n\nAny valid jsx attributes that are passed to `<SelectOptGroup>` will also get passed to the rendered `<select>` element, so you can also pass in attributes like `className`, `onChange`, etc.\n","readmeFilename":"README.md"}