{"id":53,"date":"2018-04-27T14:55:51","date_gmt":"2018-04-27T14:55:51","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=53"},"modified":"2018-08-15T21:53:31","modified_gmt":"2018-08-15T21:53:31","slug":"radio-button","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/radio-button\/","title":{"rendered":"Radio Button *"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tRadio Buttons<br \/>\n\t<\/h1>\n<h4>\n\t\tRadio buttons are used in Neon when a user must choose a single option from a list of items.<br \/>\n\t<\/h4>\n<p>The radio buttons in Neon are styled in a simple visual style, consisting of a background, and outline color.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Radio Button Default (Not selected)\" target=\"_self\"><br \/>\n\t\tRadio Button Default (Not selected)<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>\n      &lt;el-radio-group v-model=\"field.selectedValue\"&gt;\n        &lt;el-radio v-for=\"typeOptions in types[field.typeName]\" :label=\"typeOptions.name\"&gt;{{typeOptions.name}}&lt;\/el-radio&gt;\n      &lt;\/el-radio-group&gt;\n\/* Form - Radio *\/\n.neon_form_radio_group.el-radio-group {\n  display: inline-grid;\n}\n.neon_form_radio .el-radio__inner {\n  width: 20px;\n  height: 20px;\n  border: 1px solid #D8DDE6;\n  background: #fff;\n}\n.neon_form_radio .el-radio__input.is-checked .el-radio__inner {\n  border: 1px solid #0074D9;\n  background: #fff;\n}\n.neon_form_radio .el-checkbox__inner:hover {\n  background-color: #fff;\n  border-color: #0074D9;\n}\n.neon_form_radio .el-radio__label {\n  font-family: Lato;\n  font-weight: 400;\n  font-size: 14px;\n  color: #54698D;\n  letter-spacing: 0;\n}\n.neon_form_radio .el-radio__input.is-checked+.neon_form_radio .el-radio__label {\n  font-weight: 700;\n  color: #54698D;\n}\n.neon_form_radio .el-radio__inner:after {\n  width: 12px;\n  height: 12px;\n  border-radius: 100%;\n  background-color: #54698D;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%,-50%) scale(0);\n  transition: transform .15s ease-in;\n}\n.neon_form_radio .el-radio__input.is-checked .el-radio__inner:after {\n  transform: translate(-50%,-50%) scale(1);\n}\n.neon_form_radio.el-radio+.neon_form_radio.el-radio {\n  margin-left: 15px;\n}\n.neon_form_radio.el-radio {\n  margin-left: 15px;\n}\n<\/pre>\n<h2>\n\t\tStates<br \/>\n\t<\/h2>\n<p>There are 4 different states for the radio button;<\/p>\n<ul>\n<li>not selected (default)<\/li>\n<li>selected<\/li>\n<li>selected and disabled<\/li>\n<li>not selected and disabled<\/li>\n<\/ul>\n<h4>\n\t\t<a href=\"#\" title=\"Selected\" target=\"_self\"><br \/>\n\t\tSelected<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.radio_button_selected {\nbackground: #0074D9;\n}\n.radio_label_selected {\nfont-family: Lato-Bold;\nfont-size: 14px;\ncolor: #54698D;\nletter-spacing: 0;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Selected and disabled\" target=\"_self\"><br \/>\n\t\tSelected and disabled<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.radio_button_disabled_selected {\nbackground: #FFFFFF;\nborder: 1px solid #54698D;\n}\n.radio_switch_disabled_selected {\nbackground: #0074D9;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Not selected and disabled\" target=\"_self\"><br \/>\n\t\tNot selected and disabled<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.radio_button_disabled {\nbackground: #FFFFFF;\nborder: 1px solid #8C8C8C;\n}\n.radio_label_disabled {\nfont-family: Lato-Regular;\nfont-size: 14px;\ncolor: #757575;\nletter-spacing: 0;\n}\n<\/pre>\n<h2>\n\t\tOverview of CSS Classes<br \/>\n\t<\/h2>\n<h5>\n\t\tSelector<br \/>\n\t<\/h5>\n<h5>\n\t\tSummary<br \/>\n\t<\/h5>\n<h5>\n\t\tParent Selector<br \/>\n\t<\/h5>\n<p><em>.default<\/em><\/p>\n<p><em>.selected<\/em><\/p>\n<p><em>.disabled<\/em><\/p>\n<p><em>.disabled-selected<\/em><\/p>\n<p>summary needed<\/p>\n<p>summary needed<\/p>\n<p>summary needed<\/p>\n<p>summary needed<\/p>\n<p><em>.radio-button<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Components Radio Buttons Radio buttons are used in Neon when a user must choose a single option from a list of items. The radio buttons in Neon are styled in a simple visual style, consisting of a background, and outline color. Radio Button Default (Not selected) &lt;el-radio-group v-model=&#8221;field.selectedValue&#8221;&gt; &lt;el-radio v-for=&#8221;typeOptions in types[field.typeName]&#8221; :label=&#8221;typeOptions.name&#8221;&gt;{{typeOptions.name}}&lt;\/el-radio&gt; &lt;\/el-radio-group&gt; \/*&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":380,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-53","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":8,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/53\/revisions"}],"predecessor-version":[{"id":1370,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/53\/revisions\/1370"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/380"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}