{"id":231,"date":"2020-08-17T19:14:53","date_gmt":"2020-08-17T19:14:53","guid":{"rendered":"http:\/\/localhost:8888\/LD_style_guide\/?page_id=231"},"modified":"2021-04-08T21:08:30","modified_gmt":"2021-04-08T21:08:30","slug":"radio-buttons","status":"publish","type":"page","link":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/radio-buttons\/","title":{"rendered":"Radio Buttons"},"content":{"rendered":"\n<p>Radio buttons are used in the questionnaire to allow users to select between options.<\/p>\n\n\n\n<h6 class=\"pt-5\">Radio Buttons &#8211; Horizontal<\/h6>\n\n\n\n<!-- Tabs -->\n    <ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-3-tab\" href=\"#example-3\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-3\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-3-tab\" href=\"#description-3\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-3\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-3-tab\" href=\"#code-3\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-3\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-3\" role=\"tabpanel\" aria-labelledby=\"example-3-tab\">\n            <div class=\"row mt-1 mb-5\">\n\n\n\n\n<div id=\"buttonContainerHorizontal\" class=\"col-12 position-relative\">\t\n\n<!-- Radio Button -->\n<div class=\"radioButton radioButtonHorizontal active position-relative\">\n    <input value=\"false\" type=\"radio\" name=\"iconInput\">\n    <label for=\"\">Yes<\/label>\n<\/div>\n<!-- End Radio Button -->\n<!-- Radio Button -->\n<div class=\"radioButton radioButtonHorizontal position-relative\">\n    <input value=\"false\" type=\"radio\" name=\"iconInput\">\n    <label for=\"\">No<\/label>\n<\/div>\n<!-- End Radio Button -->\n<span class=\"activeRadioButtonBorderHorizontal switchFilter\"><\/span>\n<\/div>\n<!-- End col-12 -->\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-3\" role=\"tabpanel\" aria-labelledby=\"description-3-tab\">\n            <div class=\"col-12\">\n\n\n\n\n<p>A Selection Button can sometimes includes a description beneath it. The Non-Disclousre Agreement and Power of Attorney are examples of buttons with description text.<\/p>\n\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-3\" role=\"tabpanel\" aria-labelledby=\"code-3-tab\">\n            <section>\n                <div class=\"col greyvalidator \">\n                    \n\n\n\n<pre><code>\n\t&lt;button class=\"largeActiveButton\"&gt;Cancel Subscription&lt;\/button&gt;\t\t\n\t&lt;button class=\"largeInactiveButton\"&gt;Cancel Subscription&lt;\/button&gt; \t\n\t&lt;button class=\"largeActiveButton\"&gt;Submit&lt;\/button&gt; \t\n\t&lt;button class=\"largeInactiveButton\"&gt;Cancel&lt;\/button&gt; \t\t\n\t<\/code><\/pre>\n\n\n\n\n                <\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">Radio Buttons &#8211; Vertical<\/h6>\n\n\n\n<!-- Tabs -->\n    <ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-2-tab\" href=\"#example-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-2\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-2-tab\" href=\"#description-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-2\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-2-tab\" href=\"#code-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-2\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-2\" role=\"tabpanel\" aria-labelledby=\"example-2-tab\">\n            <div class=\"row mt-1 mb-5\">\n\n\n\n<div id=\"buttonContainerVertical\" class=\"col-12\">\t\n\n<!-- Radio Button -->\n<div class=\"radioButton radioButtonVertical active position-relative\">\n    <input value=\"false\" type=\"radio\" name=\"iconInput\">\n    <label for=\"\">Lorem ipsum dolor<\/label>\n<\/div>\n<!-- End Radio Button -->\n<!-- Radio Button -->\n<div class=\"radioButton radioButtonVertical position-relative\">\n    <input value=\"false\" type=\"radio\" name=\"iconInput\">\n    <label for=\"\">Lorem ipsum dolor<\/label>\n<\/div>\n<!-- End Radio Button -->\n<!-- Radio Button -->\n<div class=\"radioButton radioButtonVertical position-relative\">\n    <input value=\"false\" type=\"radio\" name=\"iconInput\">\n    <label for=\"\">Lorem ipsum dolor<\/label>\n<\/div>\n<!-- End Radio Button -->\n<span class=\"activeRadioButtonBorderVertical switchFilter\"><\/span>\n<\/div>\n<!-- End col-12 -->\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-2\" role=\"tabpanel\" aria-labelledby=\"description-2-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>A Selection Button can sometimes includes a description beneath it. The Non-Disclousre Agreement and Power of Attorney are examples of buttons with description text.<\/p>\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-2\" role=\"tabpanel\" aria-labelledby=\"code-2-tab\">\n            <section>\n                <div class=\"col greyvalidator \">\n                    \n\n\n\n<pre><code>\n\t&lt;button class=\"largeActiveButton\"&gt;Cancel Subscription&lt;\/button&gt;\t\t\n\t&lt;button class=\"largeInactiveButton\"&gt;Cancel Subscription&lt;\/button&gt; \t\n\t&lt;button class=\"largeActiveButton\"&gt;Submit&lt;\/button&gt; \t\n\t&lt;button class=\"largeInactiveButton\"&gt;Cancel&lt;\/button&gt; \t\t\n\t<\/code><\/pre>\n\n\n\n<\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">Radio Buttons &#8211; Vertical with Icons<\/h6>\n\n\n\n<!-- Tabs -->\n    <ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-1-tab\" href=\"#example-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-1\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-1-tab\" href=\"#description-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-1\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-1-tab\" href=\"#code-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-1\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-1\" role=\"tabpanel\" aria-labelledby=\"example-1-tab\">\n            <div class=\"row mt-1 mb-5\">\n\n\n\n<div class=\"col-12\">\t\n\n<!-- Radio Button -->\n<div class=\"radioButton radioButtonVerticalIcon active position-relative\">\n    <input value=\"false\" type=\"radio\" name=\"iconInput\">\n    <div class=\"iconInputContainer\">\n        <img decoding=\"async\" src=\"http:\/\/localhost:8888\/LD_style_guide\/wp-content\/uploads\/radio-button-icon.png\" alt=\"Icon\" title=\"Comprehensive agreement\">\n    <\/div>\n    <label for=\"\">Lorem ipsum dolor<\/label>\n<div class=\"activeRadioButtonBorderVerticalIcon\">\n\t\n<\/div>\n<\/div>\n<!-- End Radio Button -->\n<!-- Radio Button -->\n<div class=\"radioButton radioButtonVerticalIcon position-relative\">\n    <input value=\"false\" type=\"radio\" name=\"iconInput\">\n    <div class=\"iconInputContainer\">\n        <img decoding=\"async\" src=\"http:\/\/localhost:8888\/LD_style_guide\/wp-content\/uploads\/2Comprehensive-Agreement2x-min.png\" alt=\"Icon\" title=\"Comprehensive agreement\">\n    <\/div>\n    <label for=\"\">Lorem ipsum dolor<\/label>\n<\/div>\n<!-- End Radio Button -->\n<!-- Radio Button -->\n<div class=\"radioButton radioButtonVerticalIcon position-relative\">\n    <input value=\"false\" type=\"radio\" name=\"iconInput\">\n    <div class=\"iconInputContainer\">\n        <img decoding=\"async\" src=\"http:\/\/localhost:8888\/LD_style_guide\/wp-content\/uploads\/1Standard-Agreement2x-min.png\" alt=\"Icon\" title=\"Comprehensive agreement\">\n    <\/div>\n    <label for=\"\">Lorem ipsum dolor<\/label>\n<\/div>\n\n<\/div>\n<!-- End col-12 -->\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-1\" role=\"tabpanel\" aria-labelledby=\"description-1-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>A Selection Button can sometimes includes a description beneath it. The Non-Disclousre Agreement and Power of Attorney are examples of buttons with description text.<\/p>\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-1\" role=\"tabpanel\" aria-labelledby=\"code-1-tab\">\n            <section>\n                <div class=\"col greyvalidator\">\n\n\n\n<pre><code>\n\t&lt;button class=\"largeActiveButton\"&gt;Cancel Subscription&lt;\/button&gt;\t\t\n\t&lt;button class=\"largeInactiveButton\"&gt;Cancel Subscription&lt;\/button&gt; \t\n\t&lt;button class=\"largeActiveButton\"&gt;Submit&lt;\/button&gt; \t\n\t&lt;button class=\"largeInactiveButton\"&gt;Cancel&lt;\/button&gt; \t\t\n\t<\/code><\/pre>\n\n\n\n<\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">Radio Buttons &#8211; Vertical with Titles <\/h6>\n\n\n\n<!-- Tabs -->\n    <ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-4-tab\" href=\"#example-4\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-4\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-4-tab\" href=\"#description-4\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-4\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-4-tab\" href=\"#code-4\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-4\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-4\" role=\"tabpanel\" aria-labelledby=\"example-4-tab\">\n            <div class=\"row mt-1 mb-5\">\n\n\n\n<div class=\"col-12\">    \n\n<!-- Radio Button -->\n<div class=\"radioButton radioButtonVerticalTitle active position-relative\">\n    <input value=\"false\" type=\"radio\" name=\"iconInput\">\n    <label for=\"\"><span>Sole:<\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/label>\n<div class=\"activeRadioButtonBorderVerticalTitle\">\n    \n<\/div>\n<\/div>\n<!-- End Radio Button -->\n<!-- Radio Button -->\n<div class=\"radioButton radioButtonVerticalTitle position-relative\">\n    <input value=\"false\" type=\"radio\" name=\"iconInput\">\n    <label for=\"\"><span>Joint:<\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/label>\n<\/div>\n<!-- End Radio Button -->\n\n\n<\/div>\n<!-- End col-12 -->\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-4\" role=\"tabpanel\" aria-labelledby=\"description-4-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>A Selection Button can sometimes includes a description beneath it. The Non-Disclousre Agreement and Power of Attorney are examples of buttons with description text.<\/p>\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-4\" role=\"tabpanel\" aria-labelledby=\"code-4-tab\">\n            <section>\n                <div class=\"col greyvalidator\">\n\n\n\n<pre><code>\n    &lt;button class=\"largeActiveButton\"&gt;Cancel Subscription&lt;\/button&gt;      \n    &lt;button class=\"largeInactiveButton\"&gt;Cancel Subscription&lt;\/button&gt;    \n    &lt;button class=\"largeActiveButton\"&gt;Submit&lt;\/button&gt;   \n    &lt;button class=\"largeInactiveButton\"&gt;Cancel&lt;\/button&gt;         \n    <\/code><\/pre>\n\n\n\n                <\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Radio buttons are used in the questionnaire to allow users to select between options. Radio Buttons &#8211; Horizontal Example Description Code Yes No A Selection [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"_links":{"self":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/231"}],"collection":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/comments?post=231"}],"version-history":[{"count":63,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/231\/revisions"}],"predecessor-version":[{"id":1350,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/231\/revisions\/1350"}],"wp:attachment":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/media?parent=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}