add radio and checkbox inputs

src/components/atoms/Form/InputRadioCheckbox.module.scss

@@ -0,0 +1,51 @@
+@import '../../../styles/variables';
+
+.radioGroup {
+    margin-top: $spacer / 2;
+    margin-bottom: -2%;
+
+    @media screen and (min-width: $break-point--small) {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+}
+
+.radioWrap {
+    position: relative;
+    padding: $spacer / 2;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    margin-bottom: 2%;
+
+    @media screen and (min-width: $break-point--small) {
+        flex: 0 0 49%;
+    }
+}
+
+.radio {
+    &:checked + label {
+        border-color: $brand-pink;
+    }
+}
+
+.radioLabel {
+    margin: 0;
+    padding: 0;
+    font-family: $font-family-button;
+    font-size: $font-size-small;
+    line-height: 1.2;
+    border: 2px solid $brand-grey-lighter;
+    border-radius: .2rem;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    color: $brand-grey;
+    text-align: left;
+    padding-left: 2.5rem;
+    display: flex;
+    align-items: center;
+}

src/components/atoms/Form/InputRadioCheckbox.tsx

@@ -0,0 +1,57 @@
+import React, { PureComponent } from 'react'
+import Help from './Help'
+import styles from './InputRadioCheckbox.module.scss'
+import Label from './Label'
+import Row from './Row'
+
+interface IOptionProps {
+    value: string
+    label: string
+}
+
+interface IRadioProps {
+    required?: boolean
+    name: string
+    label: string
+    help?: string
+    type: string
+    options: IOptionProps[]
+}
+
+export default class InputRadioCheckbox extends PureComponent<IRadioProps> {
+    public render() {
+        return (
+            <Row>
+                <Label
+                    htmlFor={this.props.name}
+                    required={this.props.required ? true : false}
+                >
+                    {this.props.label}
+                </Label>
+
+                <div className={styles.radioGroup}>
+                    {/* tslint:disable-next-line:jsx-no-multiline-js */}
+                    {this.props.options.map((option, index) => (
+                        <div className={styles.radioWrap}>
+                            <input
+                                className={styles.radio}
+                                type={this.props.type}
+                                id={option.value}
+                                name={this.props.name}
+                                value={option.value}
+                            />
+                            <label
+                                className={styles.radioLabel}
+                                htmlFor={option.value}
+                            >
+                                {option.label}
+                            </label>
+                        </div>
+                    ))}
+                </div>
+
+                {this.props.help && <Help>{this.props.help}</Help>}
+            </Row>
+        )
+    }
+}

src/pages/Styleguide.tsx

@@ -1,8 +1,31 @@
 import React, { Component } from 'react'
 import Button from '../components/atoms/Button'
 import Input from '../components/atoms/Form/Input'
+import InputRadioCheckbox from '../components/atoms/Form/InputRadioCheckbox'
 import styles from './Styleguide.module.scss'
 
+const radioOptions = [
+    {
+        value: 'provider',
+        label: 'I can provide data'
+    },
+    {
+        value: 'consumer',
+        label: 'I want to use data'
+    }
+]
+
+const checkboxOptions = [
+    {
+        value: 'provider2',
+        label: 'I can provide data'
+    },
+    {
+        value: 'consumer2',
+        label: 'I want to use data'
+    }
+]
+
 class Styleguide extends Component {
     public render() {
         return (
@@ -53,6 +76,18 @@ class Styleguide extends Component {
                             placeholder="Hello placeholder"
                             tag="textarea"
                         />
+                        <InputRadioCheckbox
+                            name="helloradio"
+                            label="Hello Radios"
+                            type="radio"
+                            options={radioOptions}
+                        />
+                        <InputRadioCheckbox
+                            name="hellocheckbox"
+                            label="Hello Checkboxes"
+                            type="checkbox"
+                            options={checkboxOptions}
+                        />
                     </fieldset>
                 </form>
             </div>