From 5445e414ff5546887cb34940c0690225cf8a45d6 Mon Sep 17 00:00:00 2001
From: 1Spinne <spinne-eins@gmx.de>
Date: Tue, 22 Nov 2022 22:09:05 +0100
Subject: [PATCH 1/5] Add basic switch

---
 .../base-components.component.html            | 10 ++++
 .../base-components/base-components.module.ts |  4 +-
 .../components/switch/switch.component.html   | 11 ++++
 .../components/switch/switch.component.scss   | 60 +++++++++++++++++++
 .../switch/switch.component.spec.ts           | 25 ++++++++
 .../components/switch/switch.component.ts     | 14 +++++
 src/core/components/switch/switch.module.ts   | 18 ++++++
 7 files changed, 141 insertions(+), 1 deletion(-)
 create mode 100644 src/core/components/switch/switch.component.html
 create mode 100644 src/core/components/switch/switch.component.scss
 create mode 100644 src/core/components/switch/switch.component.spec.ts
 create mode 100644 src/core/components/switch/switch.component.ts
 create mode 100644 src/core/components/switch/switch.module.ts

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index 5acf8f94..f72ff4fa 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -106,4 +106,14 @@ <h2>Progressbar</h2>
   <design-progressbar value="50"></design-progressbar>
   <design-progressbar value="0"></design-progressbar>
 </div>
+
+<div class="componentContainer">
+  <h2>Switch, Checkbox & Radio Buttons</h2>
+  <div class="switches">
+    <design-switch label="Default"></design-switch>
+    <design-switch label="Checked" [checked]="true"></design-switch>
+    <design-switch label="Disabled" [disabled]="true"></design-switch>
+    <design-switch label="Disabled Checked" [disabled]="true" [checked]="true"></design-switch>
+  </div>
+</div>
 <!-- Cloudflare trigger -->
diff --git a/src/app/base-components/base-components.module.ts b/src/app/base-components/base-components.module.ts
index ad75c8b0..ed9fcd16 100644
--- a/src/app/base-components/base-components.module.ts
+++ b/src/app/base-components/base-components.module.ts
@@ -7,6 +7,7 @@ import { BaseComponentsComponent } from './base-components.component';
 import {ButtonModule} from "../../core/components/buttons/button/button.module";
 import {ButtonOutlineModule} from "../../core/components/buttons/button-outline/button-outline.module";
 import {ButtonTextModule} from "../../core/components/buttons/button-text/button-text.module";
+import { SwitchModule } from 'src/core/components/switch/switch.module';
 
 @NgModule({
   declarations: [
@@ -18,7 +19,8 @@ import {ButtonTextModule} from "../../core/components/buttons/button-text/button
     ButtonModule,
     ButtonOutlineModule,
     ButtonTextModule,
-    ProgressbarModule
+    ProgressbarModule,
+    SwitchModule
   ]
 })
 export class BaseComponentsModule { }
diff --git a/src/core/components/switch/switch.component.html b/src/core/components/switch/switch.component.html
new file mode 100644
index 00000000..ffb3380e
--- /dev/null
+++ b/src/core/components/switch/switch.component.html
@@ -0,0 +1,11 @@
+<div class="switch-comp">
+  <label for="switch">{{label}}</label>
+  <input
+    type="checkbox"
+    id="switch"
+    [class.disabled]="disabled"
+    [disabled]="disabled"
+    [checked]="checked"
+    class="switch"
+  >
+</div>
\ No newline at end of file
diff --git a/src/core/components/switch/switch.component.scss b/src/core/components/switch/switch.component.scss
new file mode 100644
index 00000000..cc4b2158
--- /dev/null
+++ b/src/core/components/switch/switch.component.scss
@@ -0,0 +1,60 @@
+@import "src/global-styles/theme-colors";
+
+.switch-comp {
+  display: flex;
+  align-items: center;
+  
+  label {
+    padding-right: 16px;
+  }
+  
+  .switch {
+    appearance: none;
+    box-sizing: border-box;
+    width: 44px;
+    height: 26px;
+    border-radius: 8px;
+    border: 2px solid white;
+    cursor: pointer;
+    padding: 2px 20px 2px 2px;
+    margin: 0;
+    transition: all 0.17s ease-in-out;
+  
+    &:checked {
+      padding: 2px 2px 2px 20px;
+      border-color: $primary-default;
+  
+      &.disabled {
+        border-color: $primary-disabled;
+  
+        &::after {
+          background-color: $primary-disabled;
+        }
+      }
+  
+      &::after {
+        background-color: $primary-default;
+      }
+    }
+  
+    &::after {
+      content: "";
+      transition: all 0.17s ease-in-out;
+      width: 18px;
+      height: 18px;
+      box-sizing: border-box;
+      border-radius: 4px;
+      display: block;
+      background: white;
+    }
+  
+    &.disabled {
+      cursor: default;
+      border-color: #748781;
+  
+      &::after {
+        background-color: #748781;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/core/components/switch/switch.component.spec.ts b/src/core/components/switch/switch.component.spec.ts
new file mode 100644
index 00000000..c96d22c0
--- /dev/null
+++ b/src/core/components/switch/switch.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SwitchComponent } from './switch.component';
+
+describe('SwitchComponent', () => {
+  let component: SwitchComponent;
+  let fixture: ComponentFixture<SwitchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SwitchComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SwitchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/core/components/switch/switch.component.ts b/src/core/components/switch/switch.component.ts
new file mode 100644
index 00000000..165bf168
--- /dev/null
+++ b/src/core/components/switch/switch.component.ts
@@ -0,0 +1,14 @@
+import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+
+@Component({
+  selector: 'design-switch',
+  templateUrl: './switch.component.html',
+  styleUrls: ['./switch.component.scss']
+})
+export class SwitchComponent {
+
+  @Input() disabled: boolean = false;
+  @Input() checked: boolean = false;
+  @Input() label: string = '';
+
+}
diff --git a/src/core/components/switch/switch.module.ts b/src/core/components/switch/switch.module.ts
new file mode 100644
index 00000000..569f8912
--- /dev/null
+++ b/src/core/components/switch/switch.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SwitchComponent } from './switch.component';
+
+
+
+@NgModule({
+  declarations: [
+    SwitchComponent
+  ],
+  exports: [
+    SwitchComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class SwitchModule { }

From c934c7a7f6cd4d562c69c58bb3a42ba3e5a14c67 Mon Sep 17 00:00:00 2001
From: 1Spinne <spinne-eins@gmx.de>
Date: Wed, 23 Nov 2022 12:50:18 +0100
Subject: [PATCH 2/5] Add Checkbox (only design)

---
 .../base-components.component.html            |  7 ++++
 .../base-components/base-components.module.ts |  4 +-
 .../checkbox/checkbox.component.html          | 13 +++++++
 .../checkbox/checkbox.component.scss          | 39 +++++++++++++++++++
 .../checkbox/checkbox.component.spec.ts       | 25 ++++++++++++
 .../components/checkbox/checkbox.component.ts | 14 +++++++
 .../components/checkbox/checkbox.module.ts    | 18 +++++++++
 .../components/switch/switch.component.scss   |  4 +-
 src/global-styles/_theme-colors.scss          |  5 +++
 9 files changed, 126 insertions(+), 3 deletions(-)
 create mode 100644 src/core/components/checkbox/checkbox.component.html
 create mode 100644 src/core/components/checkbox/checkbox.component.scss
 create mode 100644 src/core/components/checkbox/checkbox.component.spec.ts
 create mode 100644 src/core/components/checkbox/checkbox.component.ts
 create mode 100644 src/core/components/checkbox/checkbox.module.ts

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index f72ff4fa..8ebd020f 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -115,5 +115,12 @@ <h2>Switch, Checkbox & Radio Buttons</h2>
     <design-switch label="Disabled" [disabled]="true"></design-switch>
     <design-switch label="Disabled Checked" [disabled]="true" [checked]="true"></design-switch>
   </div>
+  <br>
+  <div class="checkboxes">
+    <design-checkbox label="Default"></design-checkbox>
+    <design-checkbox label="Default" [checked]="true"></design-checkbox>
+    <design-checkbox label="Default" [disabled]="true"></design-checkbox>
+    <design-checkbox label="Default" [checked]="true" [disabled]="true"></design-checkbox>
+  </div>
 </div>
 <!-- Cloudflare trigger -->
diff --git a/src/app/base-components/base-components.module.ts b/src/app/base-components/base-components.module.ts
index ed9fcd16..03eea6f9 100644
--- a/src/app/base-components/base-components.module.ts
+++ b/src/app/base-components/base-components.module.ts
@@ -8,6 +8,7 @@ import {ButtonModule} from "../../core/components/buttons/button/button.module";
 import {ButtonOutlineModule} from "../../core/components/buttons/button-outline/button-outline.module";
 import {ButtonTextModule} from "../../core/components/buttons/button-text/button-text.module";
 import { SwitchModule } from 'src/core/components/switch/switch.module';
+import { CheckboxModule } from 'src/core/components/checkbox/checkbox.module';
 
 @NgModule({
   declarations: [
@@ -20,7 +21,8 @@ import { SwitchModule } from 'src/core/components/switch/switch.module';
     ButtonOutlineModule,
     ButtonTextModule,
     ProgressbarModule,
-    SwitchModule
+    SwitchModule,
+    CheckboxModule
   ]
 })
 export class BaseComponentsModule { }
diff --git a/src/core/components/checkbox/checkbox.component.html b/src/core/components/checkbox/checkbox.component.html
new file mode 100644
index 00000000..6b7935e3
--- /dev/null
+++ b/src/core/components/checkbox/checkbox.component.html
@@ -0,0 +1,13 @@
+<div class="checkbox-comp">
+  <label for="checkbox">
+    {{label}}
+  </label>
+  <input
+    type="checkbox"
+    class="checkbox"
+    id="checkbox"
+    [class.disabled]="disabled"
+    [disabled]="disabled"
+    [checked]="checked"
+  >
+</div>
\ No newline at end of file
diff --git a/src/core/components/checkbox/checkbox.component.scss b/src/core/components/checkbox/checkbox.component.scss
new file mode 100644
index 00000000..f2433090
--- /dev/null
+++ b/src/core/components/checkbox/checkbox.component.scss
@@ -0,0 +1,39 @@
+@import "src/global-styles/theme-colors";
+
+.checkbox-comp {
+  display: flex;
+  align-items: center;
+  
+  label {
+    padding-right: 16px;
+  }
+  
+  .checkbox {
+    appearance: none;
+    width: 26px;
+    height: 26px;
+    padding: 2px;
+    margin: 0;
+    box-sizing: border-box;
+    background-clip: content-box !important;
+    background: transparent;
+    border: 2px solid white;
+    border-radius: 8px;
+    cursor: pointer;
+
+    &:checked {
+      background: $primary-default;
+      border-color: $primary-default;
+    }
+
+    &.disabled {
+      cursor: default;
+      border-color: $white-disabled;
+
+      &:checked {
+        background: $primary-disabled;
+        border-color: $primary-disabled;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/core/components/checkbox/checkbox.component.spec.ts b/src/core/components/checkbox/checkbox.component.spec.ts
new file mode 100644
index 00000000..18fc8db0
--- /dev/null
+++ b/src/core/components/checkbox/checkbox.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CheckboxComponent } from './checkbox.component';
+
+describe('CheckboxComponent', () => {
+  let component: CheckboxComponent;
+  let fixture: ComponentFixture<CheckboxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CheckboxComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CheckboxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/core/components/checkbox/checkbox.component.ts b/src/core/components/checkbox/checkbox.component.ts
new file mode 100644
index 00000000..a92729e8
--- /dev/null
+++ b/src/core/components/checkbox/checkbox.component.ts
@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'design-checkbox',
+  templateUrl: './checkbox.component.html',
+  styleUrls: ['./checkbox.component.scss']
+})
+export class CheckboxComponent {
+
+  @Input() disabled: boolean = false;
+  @Input() checked: boolean = false;
+  @Input() label: string = '';
+
+}
diff --git a/src/core/components/checkbox/checkbox.module.ts b/src/core/components/checkbox/checkbox.module.ts
new file mode 100644
index 00000000..1864ffb9
--- /dev/null
+++ b/src/core/components/checkbox/checkbox.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CheckboxComponent } from './checkbox.component';
+
+
+
+@NgModule({
+  declarations: [
+    CheckboxComponent
+  ],
+  exports: [
+    CheckboxComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class CheckboxModule { }
diff --git a/src/core/components/switch/switch.component.scss b/src/core/components/switch/switch.component.scss
index cc4b2158..6356f123 100644
--- a/src/core/components/switch/switch.component.scss
+++ b/src/core/components/switch/switch.component.scss
@@ -50,10 +50,10 @@
   
     &.disabled {
       cursor: default;
-      border-color: #748781;
+      border-color: $white-disabled;
   
       &::after {
-        background-color: #748781;
+        background-color: $white-disabled;
       }
     }
   }
diff --git a/src/global-styles/_theme-colors.scss b/src/global-styles/_theme-colors.scss
index 4288af91..0bae353c 100644
--- a/src/global-styles/_theme-colors.scss
+++ b/src/global-styles/_theme-colors.scss
@@ -23,6 +23,11 @@ $info-default: #3281F6;
 $info-hover: #245EB5;
 $info-disabled: #2D456C;
 
+/*white*/
+$white-default: #FFFFFF;
+$white-hover: #FFFFFF;
+$white-disabled: #748781;
+
 /*fonts*/
 $labeled-disabled-font: #748781;
 $checkbox-disabled-font: $labeled-disabled-font;

From 662dd2e83514aef666c16937df3e2fcb965c3b35 Mon Sep 17 00:00:00 2001
From: 1Spinne <spinne-eins@gmx.de>
Date: Wed, 23 Nov 2022 13:08:21 +0100
Subject: [PATCH 3/5] Add radio button (only design)

---
 .../base-components.component.html            |  7 ++++
 .../base-components/base-components.module.ts |  4 +-
 .../radiobutton/radiobutton.component.html    | 13 +++++++
 .../radiobutton/radiobutton.component.scss    | 39 +++++++++++++++++++
 .../radiobutton/radiobutton.component.spec.ts | 25 ++++++++++++
 .../radiobutton/radiobutton.component.ts      | 14 +++++++
 .../radiobutton/radiobutton.module.ts         | 18 +++++++++
 7 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 src/core/components/radiobutton/radiobutton.component.html
 create mode 100644 src/core/components/radiobutton/radiobutton.component.scss
 create mode 100644 src/core/components/radiobutton/radiobutton.component.spec.ts
 create mode 100644 src/core/components/radiobutton/radiobutton.component.ts
 create mode 100644 src/core/components/radiobutton/radiobutton.module.ts

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index 8ebd020f..255fa7f6 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -122,5 +122,12 @@ <h2>Switch, Checkbox & Radio Buttons</h2>
     <design-checkbox label="Default" [disabled]="true"></design-checkbox>
     <design-checkbox label="Default" [checked]="true" [disabled]="true"></design-checkbox>
   </div>
+  <br>
+  <div class="checkboxes">
+    <design-radiobutton label="Default"></design-radiobutton>
+    <design-radiobutton label="Default" [checked]="true"></design-radiobutton>
+    <design-radiobutton label="Default" [disabled]="true"></design-radiobutton>
+    <design-radiobutton label="Default" [checked]="true" [disabled]="true"></design-radiobutton>
+  </div>
 </div>
 <!-- Cloudflare trigger -->
diff --git a/src/app/base-components/base-components.module.ts b/src/app/base-components/base-components.module.ts
index 03eea6f9..2703ed02 100644
--- a/src/app/base-components/base-components.module.ts
+++ b/src/app/base-components/base-components.module.ts
@@ -9,6 +9,7 @@ import {ButtonOutlineModule} from "../../core/components/buttons/button-outline/
 import {ButtonTextModule} from "../../core/components/buttons/button-text/button-text.module";
 import { SwitchModule } from 'src/core/components/switch/switch.module';
 import { CheckboxModule } from 'src/core/components/checkbox/checkbox.module';
+import { RadiobuttonModule } from 'src/core/components/radiobutton/radiobutton.module';
 
 @NgModule({
   declarations: [
@@ -22,7 +23,8 @@ import { CheckboxModule } from 'src/core/components/checkbox/checkbox.module';
     ButtonTextModule,
     ProgressbarModule,
     SwitchModule,
-    CheckboxModule
+    CheckboxModule,
+    RadiobuttonModule
   ]
 })
 export class BaseComponentsModule { }
diff --git a/src/core/components/radiobutton/radiobutton.component.html b/src/core/components/radiobutton/radiobutton.component.html
new file mode 100644
index 00000000..8d0a46a7
--- /dev/null
+++ b/src/core/components/radiobutton/radiobutton.component.html
@@ -0,0 +1,13 @@
+<div class="radiobutton-comp">
+  <label for="radiobutton">
+    {{label}}
+  </label>
+  <input
+    type="radio"
+    class="radiobutton"
+    id="radiobutton"
+    [class.disabled]="disabled"
+    [disabled]="disabled"
+    [checked]="checked"
+  >
+</div>
\ No newline at end of file
diff --git a/src/core/components/radiobutton/radiobutton.component.scss b/src/core/components/radiobutton/radiobutton.component.scss
new file mode 100644
index 00000000..0561d500
--- /dev/null
+++ b/src/core/components/radiobutton/radiobutton.component.scss
@@ -0,0 +1,39 @@
+@import "src/global-styles/theme-colors";
+
+.radiobutton-comp {
+  display: flex;
+  align-items: center;
+
+  label {
+    padding-right: 16px;
+  }
+
+  .radiobutton {
+    appearance: none;
+    width: 26px;
+    height: 26px;
+    padding: 2px;
+    margin: 0;
+    box-sizing: border-box;
+    background-clip: content-box !important;
+    background: transparent;
+    border: 2px solid white;
+    border-radius: 50px;
+    cursor: pointer;
+
+    &:checked {
+      background: $primary-default;
+      border-color: $primary-default;
+    }
+
+    &.disabled {
+      cursor: default;
+      border-color: $white-disabled;
+
+      &:checked {
+        background: $primary-disabled;
+        border-color: $primary-disabled;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/core/components/radiobutton/radiobutton.component.spec.ts b/src/core/components/radiobutton/radiobutton.component.spec.ts
new file mode 100644
index 00000000..147d4c82
--- /dev/null
+++ b/src/core/components/radiobutton/radiobutton.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RadiobuttonComponent } from './radiobutton.component';
+
+describe('RadiobuttonComponent', () => {
+  let component: RadiobuttonComponent;
+  let fixture: ComponentFixture<RadiobuttonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RadiobuttonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RadiobuttonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/core/components/radiobutton/radiobutton.component.ts b/src/core/components/radiobutton/radiobutton.component.ts
new file mode 100644
index 00000000..ee0044c4
--- /dev/null
+++ b/src/core/components/radiobutton/radiobutton.component.ts
@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'design-radiobutton',
+  templateUrl: './radiobutton.component.html',
+  styleUrls: ['./radiobutton.component.scss']
+})
+export class RadiobuttonComponent {
+
+  @Input() disabled: boolean = false;
+  @Input() checked: boolean = false;
+  @Input() label: string = '';
+
+}
diff --git a/src/core/components/radiobutton/radiobutton.module.ts b/src/core/components/radiobutton/radiobutton.module.ts
new file mode 100644
index 00000000..bfd5809c
--- /dev/null
+++ b/src/core/components/radiobutton/radiobutton.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RadiobuttonComponent } from './radiobutton.component';
+
+
+
+@NgModule({
+  declarations: [
+    RadiobuttonComponent
+  ],
+  exports: [
+    RadiobuttonComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class RadiobuttonModule { }

From cb4b391237f8d36720746a072a3218e87cd0edcf Mon Sep 17 00:00:00 2001
From: 1Spinne <spinne-eins@gmx.de>
Date: Wed, 23 Nov 2022 19:22:20 +0100
Subject: [PATCH 4/5] Add functionality

---
 .../base-components.component.html            | 102 +++++++++++++++---
 .../base-components.component.ts              |  11 +-
 .../checkbox/checkbox.component.html          |   9 +-
 .../components/checkbox/checkbox.component.ts |   6 +-
 .../radiobutton/radiobutton.component.html    |   5 +-
 .../radiobutton/radiobutton.component.ts      |   4 +
 .../components/switch/switch.component.html   |   7 +-
 .../components/switch/switch.component.ts     |  12 ++-
 8 files changed, 130 insertions(+), 26 deletions(-)

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index 255fa7f6..fb151e25 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -110,24 +110,98 @@ <h2>Progressbar</h2>
 <div class="componentContainer">
   <h2>Switch, Checkbox & Radio Buttons</h2>
   <div class="switches">
-    <design-switch label="Default"></design-switch>
-    <design-switch label="Checked" [checked]="true"></design-switch>
-    <design-switch label="Disabled" [disabled]="true"></design-switch>
-    <design-switch label="Disabled Checked" [disabled]="true" [checked]="true"></design-switch>
+    <design-switch
+      label="Default"
+      [(checked)]="buttonStates.default_switch"
+      [id]="'default_switch'"
+      [name]="'default_switch'">
+    </design-switch>
+
+    <design-switch
+      label="Checked"
+      [(checked)]="buttonStates.checked_switch"
+      [id]="'checked_switch'"
+      [name]="'checked_switch'">
+    </design-switch>
+
+    <design-switch
+      label="Disabled"
+      [(checked)]="buttonStates.disabled_switch"
+      [disabled]="true"
+      [id]="'disabled_switch'"
+      [name]="'disabled_switch'">
+    </design-switch>
+
+    <design-switch
+      label="Disabled Checked"
+      [disabled]="true"
+      [(checked)]="buttonStates.disabled_checked_switch"
+      [id]="'disabled_checked_switch'"
+      [name]="'disabled_checked_switch'">
+    </design-switch>
+
+
   </div>
   <br>
   <div class="checkboxes">
-    <design-checkbox label="Default"></design-checkbox>
-    <design-checkbox label="Default" [checked]="true"></design-checkbox>
-    <design-checkbox label="Default" [disabled]="true"></design-checkbox>
-    <design-checkbox label="Default" [checked]="true" [disabled]="true"></design-checkbox>
+    <design-checkbox
+      label="Default"
+      [id]="'default_checkbox'"
+      [name]="'default_checkbox'">
+    </design-checkbox>
+
+    <design-checkbox
+      label="Checked"
+      [checked]="true"
+      [id]="'checked_checkbox'"
+      [name]="'checked_checkbox'">
+    </design-checkbox>
+
+    <design-checkbox
+      label="Disabled"
+      [disabled]="true"
+      [id]="'disabled_checkbox'"
+      [name]="'disabled_checkbox'">
+    </design-checkbox>
+
+    <design-checkbox
+      label="Disabled Checked"
+      [disabled]="true"
+      [checked]="true"
+      [id]="'disabled_checked_checkbox'"
+      [name]="'disabled_checked_checkbox'">
+    </design-checkbox>
   </div>
   <br>
-  <div class="checkboxes">
-    <design-radiobutton label="Default"></design-radiobutton>
-    <design-radiobutton label="Default" [checked]="true"></design-radiobutton>
-    <design-radiobutton label="Default" [disabled]="true"></design-radiobutton>
-    <design-radiobutton label="Default" [checked]="true" [disabled]="true"></design-radiobutton>
+
+  <div class="radiobutton">
+    <design-radiobutton
+      label="Default"
+      [id]="'default_radiobutton'"
+      [name]="'radiobutton'">
+    </design-radiobutton>
+
+    <design-radiobutton
+      label="Checked" 
+      [checked]="true"
+      [id]="'checked_radiobutton'"
+      [name]="'radiobutton'">
+    </design-radiobutton>
+
+    <design-radiobutton
+      label="Disabled" 
+      [disabled]="true"
+      [id]="'disabled_radiobutton'"
+      [name]="'radiobutton'">
+    </design-radiobutton>
+
+    <design-radiobutton
+      label="Disabled Checked" 
+      [disabled]="true"
+      [checked]="true"
+      [id]="'disabled_checked_radiobutton'"
+      [name]="'radiobutton'">
+    </design-radiobutton>
   </div>
-</div>
+</div> 
 <!-- Cloudflare trigger -->
diff --git a/src/app/base-components/base-components.component.ts b/src/app/base-components/base-components.component.ts
index ec2fc41d..5e484345 100644
--- a/src/app/base-components/base-components.component.ts
+++ b/src/app/base-components/base-components.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'app-base-components',
@@ -7,7 +8,15 @@ import { Component } from '@angular/core';
 })
 export class BaseComponentsComponent {
 
-  constructor() { }
+  constructor() {
+  }
+
+  buttonStates = {
+    default_switch: false,
+    checked_switch: true,
+    disabled_switch: false,
+    disabled_checked_switch: true,
+  }
 
   pressedAlert(name: string) {
     alert(name + " was pressed!");
diff --git a/src/core/components/checkbox/checkbox.component.html b/src/core/components/checkbox/checkbox.component.html
index 6b7935e3..07ea99a6 100644
--- a/src/core/components/checkbox/checkbox.component.html
+++ b/src/core/components/checkbox/checkbox.component.html
@@ -1,13 +1,12 @@
 <div class="checkbox-comp">
-  <label for="checkbox">
-    {{label}}
-  </label>
+  <label [for]="id">{{label}}</label>
   <input
     type="checkbox"
-    class="checkbox"
-    id="checkbox"
+    [id]="id"
+    [name]="name"
     [class.disabled]="disabled"
     [disabled]="disabled"
     [checked]="checked"
+    class="checkbox"
   >
 </div>
\ No newline at end of file
diff --git a/src/core/components/checkbox/checkbox.component.ts b/src/core/components/checkbox/checkbox.component.ts
index a92729e8..0de823f9 100644
--- a/src/core/components/checkbox/checkbox.component.ts
+++ b/src/core/components/checkbox/checkbox.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'design-checkbox',
@@ -8,7 +8,11 @@ import { Component, Input } from '@angular/core';
 export class CheckboxComponent {
 
   @Input() disabled: boolean = false;
+
   @Input() checked: boolean = false;
+
   @Input() label: string = '';
+  @Input() id: string;
+  @Input() name: string;
 
 }
diff --git a/src/core/components/radiobutton/radiobutton.component.html b/src/core/components/radiobutton/radiobutton.component.html
index 8d0a46a7..134a642d 100644
--- a/src/core/components/radiobutton/radiobutton.component.html
+++ b/src/core/components/radiobutton/radiobutton.component.html
@@ -1,11 +1,12 @@
 <div class="radiobutton-comp">
-  <label for="radiobutton">
+  <label [for]="id">
     {{label}}
   </label>
   <input
     type="radio"
     class="radiobutton"
-    id="radiobutton"
+    [id]="id"
+    [name]="name"
     [class.disabled]="disabled"
     [disabled]="disabled"
     [checked]="checked"
diff --git a/src/core/components/radiobutton/radiobutton.component.ts b/src/core/components/radiobutton/radiobutton.component.ts
index ee0044c4..9a258a60 100644
--- a/src/core/components/radiobutton/radiobutton.component.ts
+++ b/src/core/components/radiobutton/radiobutton.component.ts
@@ -8,7 +8,11 @@ import { Component, Input } from '@angular/core';
 export class RadiobuttonComponent {
 
   @Input() disabled: boolean = false;
+  
   @Input() checked: boolean = false;
+  
   @Input() label: string = '';
+  @Input() id: string;
+  @Input() name: string;
 
 }
diff --git a/src/core/components/switch/switch.component.html b/src/core/components/switch/switch.component.html
index ffb3380e..1feeeef2 100644
--- a/src/core/components/switch/switch.component.html
+++ b/src/core/components/switch/switch.component.html
@@ -1,11 +1,14 @@
 <div class="switch-comp">
-  <label for="switch">{{label}}</label>
+  <label [for]="id">{{label}}</label>
+
   <input
     type="checkbox"
-    id="switch"
+    [id]="id"
+    [name]="name"
     [class.disabled]="disabled"
     [disabled]="disabled"
     [checked]="checked"
+    (change)="onChange()"
     class="switch"
   >
 </div>
\ No newline at end of file
diff --git a/src/core/components/switch/switch.component.ts b/src/core/components/switch/switch.component.ts
index 165bf168..fee021e2 100644
--- a/src/core/components/switch/switch.component.ts
+++ b/src/core/components/switch/switch.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'design-switch',
@@ -8,7 +8,17 @@ import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core
 export class SwitchComponent {
 
   @Input() disabled: boolean = false;
+
   @Input() checked: boolean = false;
+  @Output() checkedChange = new EventEmitter<boolean>();
+
   @Input() label: string = '';
+  @Input() id: string;
+  @Input() name: string;
+
+  onChange() {
+    this.checked = !this.checked;
+    this.checkedChange.emit(this.checked);
+  }
 
 }

From 97ee0bc66b1cd42342b7bcd60c1008428c732d56 Mon Sep 17 00:00:00 2001
From: 1Spinne <spinne-eins@gmx.de>
Date: Wed, 23 Nov 2022 19:22:59 +0100
Subject: [PATCH 5/5] Add to ComponentDocs

---
 ComponentDocs.md | 40 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/ComponentDocs.md b/ComponentDocs.md
index cbd08e27..cc9f1717 100644
--- a/ComponentDocs.md
+++ b/ComponentDocs.md
@@ -25,7 +25,45 @@ Style classes :
 ### Example
 
 ```html
-// ADD EXAMPLES FOR ALL THE DEFAULT COMPONENTS //
+<design-radiobutton
+  label="Disabled Checked"
+  [disabled]="true"
+  [checked]="true"
+  [id]="'disabled_checked_radiobutton'"
+  [name]="'radiobutton'">
+</design-radiobutton>
 ```
 
 ---
+
+## Checkbox
+
+### Example
+
+```html
+<design-checkbox
+  label="Disabled Checked"
+  [disabled]="true"
+  [checked]="true"
+  [id]="'disabled_checked_checkbox'"
+  [name]="'disabled_checked_checkbox'">
+</design-checkbox>
+```
+
+---
+
+## Switches
+
+### Example
+
+```html
+<design-switch
+  label="Disabled Checked"
+  [disabled]="true"
+  [(checked)]="buttonStates.disabled_checked_switch"
+  [id]="'disabled_checked_switch'"
+  [name]="'disabled_checked_switch'">
+</design-switch>
+```
+
+---
\ No newline at end of file