Merge pull request #14 from maitrakhatri/input_checkbox-radio

Input checkbox radio
maitrakhatri · Feb 6, 2022 · a92f986 · a92f986
2 parents 7cf5d6a + e5b50fe
commit a92f986
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 0 deletions.
diff --git a/CSS/Components/input/input.css b/CSS/Components/input/input.css
@@ -14,4 +14,8 @@
 
 .msg {
     font-size: small;
+}
+
+input[type=radio], input[type=checkbox] {
+    margin: 1rem;
 }
diff --git a/CSS/Components/input/input.html b/CSS/Components/input/input.html
@@ -73,6 +73,20 @@
             <div class="text-green msg">Good to go !!</div>
         </div>
 
+        <div class="checkbox">
+            <label>Download Color</label><br>
+            <input type="checkbox" name="color" id="red">Red
+            <input type="checkbox" name="color" id="blue">Blue
+            <input type="checkbox" name="color" id="yellow">Yellow
+        </div>
+
+        <div class="radio-button">
+            <label>Select Primary Color</label><br>
+            <input type="radio" name="color" id="red">Red
+            <input type="radio" name="color" id="blue">Blue
+            <input type="radio" name="color" id="yellow">Yellow
+        </div>
+
     </div>
 
 </body>

diff --git a/docs/components.html b/docs/components.html
@@ -627,6 +627,35 @@ <h3 class="sub-section-title">Alert message Inputs</h3>
 
                 </div>
 
+                <h3 class="sub-section-title">Checkbox</h3>
+
+                <div class="component-container">
+                    <div class="checkbox">
+                        <label>Download Color</label><br>
+                        <input type="checkbox" name="color" id="red">Red
+                        <input type="checkbox" name="color" id="blue">Blue
+                        <input type="checkbox" name="color" id="yellow">Yellow
+                    </div>
+                </div>
+
+                <div class="code-snippets">
+                    <iframe src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=javascript&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253Cdiv%2520class%253D%2522checkbox%2522%253E%250A%2520%2520%2520%2520%253Clabel%253EDownload%2520Color%253C%252Flabel%253E%253Cbr%253E%250A%2520%2520%2520%2520%253Cinput%2520type%253D%2522checkbox%2522%2520name%253D%2522color%2522%2520id%253D%2522red%2522%253ERed%250A%2520%2520%2520%2520%253Cinput%2520type%253D%2522checkbox%2522%2520name%253D%2522color%2522%2520id%253D%2522blue%2522%253EBlue%250A%2509%253Cinput%2520type%253D%2522checkbox%2522%2520name%253D%2522color%2522%2520id%253D%2522yellow%2522%253EYellow%250A%253C%252Fdiv%253E" style="width: 622px; height: 281px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin"></iframe>
+                </div>
+
+                <h3 class="sub-section-title">Radio Button</h3>
+
+                <div class="component-container">
+                    <div class="radio-button">
+                        <label>Select Primary Color</label><br>
+                        <input type="radio" name="color" id="red">Red
+                        <input type="radio" name="color" id="blue">Blue
+                        <input type="radio" name="color" id="yellow">Yellow
+                    </div>
+                </div>
+
+                <div class="code-snippets">
+                    <iframe src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=javascript&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253Cdiv%2520class%253D%2522radio-button%2522%253E%250A%2520%2520%2520%2520%253Clabel%253ESelect%2520Primary%2520Color%253C%252Flabel%253E%253Cbr%253E%250A%2520%2520%2520%2520%253Cinput%2520type%253D%2522radio%2522%2520name%253D%2522color%2522%2520id%253D%2522red%2522%253ERed%250A%2520%2520%2520%2520%253Cinput%2520type%253D%2522radio%2522%2520name%253D%2522color%2522%2520id%253D%2522blue%2522%253EBlue%250A%2509%253Cinput%2520type%253D%2522radio%2522%2520name%253D%2522color%2522%2520id%253D%2522yellow%2522%253EYellow%250A%253C%252Fdiv%253E" style="width: 614px; height: 298px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin"></iframe>
+                </div>
         </div>
 
         <div id="text-utilities" class="section">