fix(toggle): added missing name property (#1800)

* refactor: added missing name property

* docs: added docs for name attribute

* test: fix testcase

e2e/cypress/e2e/03-0-action/db-toggle.cy.js

@@ -13,15 +13,15 @@ context('db-toggle', () => {
       .check()
       .should('be.checked');
     cy.get('db-toggle> input')
-      .eq(2)
+      .eq(3)
       .should('be.checked')
       .uncheck()
       .should('not.be.checked');
   });
 
   it('Toggle should be disabled', function () {
-    cy.get('db-toggle > input').eq(1).should('be.disabled');
-    cy.get('db-toggle > input').eq(3).should('be.disabled');
+    cy.get('db-toggle > input').eq(2).should('be.disabled');
+    cy.get('db-toggle > input').eq(4).should('be.disabled');
   });
   // it('Datalist option should be correct', function () {
   //   cy.get('db-input > datalist > option')

packages/db-ui-elements-stencil/src/components/db-toggle/db-toggle.tsx

@@ -18,6 +18,10 @@ export class DbToggle {
    * Checked property
    */
   @Prop({ reflect: true }) checked: boolean;
+  /**
+   * The name attribute specifies a name for the included input element.
+   */
+  @Prop({ reflect: true }) name?: string;
 
   private handleChange(event) {
     this.dbChange.emit(event);
@@ -38,6 +42,7 @@ export class DbToggle {
           disabled={this.disabled}
           checked={this.checked}
           id={this.htmlid}
+          name={this.name}
           onChange={(event) => this.handleChange(event)}
         />
         <label class="elm-label" htmlFor={this.htmlid}>

packages/db-ui-elements-stencil/src/components/db-toggle/stories/db-toggle.intro.stories.mdx

@@ -11,6 +11,10 @@ import Readme from './../readme.md';
   <db-toggle></db-toggle>
 </Canvas>
 
+<Canvas>
+  <db-toggle name="unique-name">Toggle with a unique `name`-attribute</db-toggle>
+</Canvas>
+
 <db-headline>The toggle component with text. </db-headline>
 
 <Canvas>