diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
index 1f3545707..1ee5d754a 100644
--- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
@@ -1,6 +1,7 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
-import { boolean } from '@storybook/addon-knobs';
+import { boolean, object } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
@@ -123,8 +124,8 @@ Dropdown indicator can be hidden using `showCaret` attribute.
```
-Dropdowns also support radio buttons. Currently, this is the only supported
-form field.
+Dropdowns also support radio buttons and checkboxes. Currently, radio buttons and checkboxes are the only supported
+form fields.
```html
@@ -144,6 +145,67 @@ form field.
```
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+ {{
+ template: hbs`
+
+
+
+
+
+
+
+
+
+ `,
+ context: {
+ disabled: boolean('disabled', false),
+ items: object('items', [
+ { id: 1, name: 'Foo' },
+ { id: 2, name: 'Bar' },
+ { id: 3, name: 'Baz' },
+ ]),
+ selectedItems: object('selectedItems', []),
+ onChange: action('changed'),
+ }
+ }}
+
+
+
+
Closing dropdown after clicking inside it's content can be ignored using `ignoreClickInside`. This is useful when dropdown contains keyvalue items that users need to select/copy/interact with.
```html
diff --git a/addons/rose/addon/components/rose/form/index.hbs b/addons/rose/addon/components/rose/form/index.hbs
index e23e52c0b..18f637ea3 100644
--- a/addons/rose/addon/components/rose/form/index.hbs
+++ b/addons/rose/addon/components/rose/form/index.hbs
@@ -17,6 +17,7 @@
{{yield (hash
radioGroup=(component 'rose/form/radio/group' disabled=this.disabled)
checkbox=(component 'rose/form/checkbox' disabled=this.disabled)
+ checkboxGroup=(component 'rose/form/checkbox/group' disabled=this.disabled)
input=(component 'rose/form/input' disabled=this.disabled)
select=(component 'rose/form/select' disabled=this.disabled)
textarea=(component 'rose/form/textarea' disabled=this.disabled)
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index 2d9634e42..96e29dd5a 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -69,4 +69,78 @@ $checkmark: url("data:image/svg+xml;utf-8,