diff --git a/demo/index.html b/demo/index.html
index fdf30d9..e0b049f 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -71,6 +71,14 @@
auro-checkbox
+ Group only
+
+
+
+
+
+
+
Default checkbox group
@@ -172,26 +180,24 @@ auro-checkbox
Checkbox group with option set to checked
-
+
+ Form label goes here
+ >Computers
+ >Music
+ >Arts
@@ -199,26 +205,24 @@ auro-checkbox
Checkbox group set disabled
-
+
+ Form label goes here
+ >Computers
+ >Music
+ >Arts
@@ -226,28 +230,23 @@ auro-checkbox
Checkbox group with error
-
+
+ Form label goes here
+ >Computers
+ >Music
+ >Arts
diff --git a/docs/api.md b/docs/api.md
index 1220b7b..ea86e93 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -1,20 +1,20 @@
## Properties: auro-checkbox-group
| Attribute | Value type | Description |
-|----|----|----|
+|----|----|----
| disabled | boolean | enables disabled state of the element |
| error | string | set error message for checkbox group |
| horizontal | boolean | toggles layout direction, default is `vertical`, max 3 options |
-| label | string | sets content for checkbox group label |
+| required | boolean | defines element group as required|
## Properties: auro-checkbox
-| Attribute | Value type | Description |
-|----|----|----|
+| Attribute | Value type |Description |
+|----|----|----
| checked | boolean | enables checked state of the element |
| disabled | boolean | enables disabled state of the element |
-| error | string | set error state for checkbox |
+| required | boolean | defines element as required |
+| error | boolean | set error state for checkbox |
| id | string | sets the individual `id` per element |
-| label | string | sets content for checkbox label |
| name | string | Accepts any string, `DOMString` representing the value of the input |
| value | string | sets the elements input value |
diff --git a/src/auro-checkbox-group.js b/src/auro-checkbox-group.js
index 9073511..d92bf91 100644
--- a/src/auro-checkbox-group.js
+++ b/src/auro-checkbox-group.js
@@ -31,7 +31,7 @@ class AuroCheckboxGroup extends LitElement {
connectedCallback() {
super.connectedCallback();
- this.items = Array.from(this.querySelectorAll('auro-checkbox')) || [];
+ this.items = Array.from(this.querySelectorAll('auro-checkbox'));
this.items.forEach((el) => {
el.disabled = this.disabled
diff --git a/src/auro-checkbox.js b/src/auro-checkbox.js
index 198e1bf..fd3786c 100644
--- a/src/auro-checkbox.js
+++ b/src/auro-checkbox.js
@@ -39,7 +39,6 @@ class AuroCheckbox extends LitElement {
reflect: true
},
id: { type: String },
- label: { type: String },
name: { type: String },
value: { type: String }
};
diff --git a/test/auro-checkbox.test.js b/test/auro-checkbox.test.js
index fd4d34d..f504d1d 100644
--- a/test/auro-checkbox.test.js
+++ b/test/auro-checkbox.test.js
@@ -17,7 +17,7 @@ describe('auro-checkbox-group', () => {
horizontal
required
error=${expectedError}
- >
+ >Checkbox option
`);
const root = el.shadowRoot;
@@ -26,6 +26,10 @@ describe('auro-checkbox-group', () => {
expect(el.horizontal).to.be.true;
expect(el.required).to.be.true;
expect(error.textContent).be.equal(expectedError);
+ expect(el).dom.to.equal(`
+
+ Checkbox option
+ `);
});
});
@@ -43,8 +47,9 @@ describe('auro-checkbox', () => {
value="${expectedValue}"
checked
disabled
+ required
error="${expectedError}"
- >
+ >Checkbox option
`);
const root = el.shadowRoot;
@@ -57,6 +62,10 @@ describe('auro-checkbox', () => {
expect(input.name).to.equal(expectedName);
expect(input.type).to.equal('checkbox');
expect(errorBorder).to.not.be.undefined;
+ expect(el).dom.to.equal(`
+
+ Checkbox option
+ `);
});
it('should fire a input event with correct data', async () => {