diff --git a/addons/rose/addon/components/rose/form/checkbox.stories.mdx b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
index 3a15884dc..539f531c0 100644
--- a/addons/rose/addon/components/rose/form/checkbox.stories.mdx
+++ b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
@@ -25,6 +25,7 @@ Renders a form input checkbox.
{{yield (hash
diff --git a/addons/rose/tests/integration/components/rose/form/checkbox-test.js b/addons/rose/tests/integration/components/rose/form/checkbox-test.js
index 6ceb4abf9..53f5ef87b 100644
--- a/addons/rose/tests/integration/components/rose/form/checkbox-test.js
+++ b/addons/rose/tests/integration/components/rose/form/checkbox-test.js
@@ -7,9 +7,19 @@ module('Integration | Component | rose/form/checkbox', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
+ assert.expect(3);
await render(hbs``);
assert.equal(await find('label').textContent.trim(), 'Label');
assert.ok(await find('input'));
+ assert.notOk(await find('.rose-form-checkbox-label-description'));
+ });
+
+ test('it renders optional description paragraph', async function (assert) {
+ assert.expect(3);
+ await render(hbs``);
+ assert.equal(await find('.rose-form-checkbox-label-text').textContent.trim(), 'Label');
+ assert.equal(await find('.rose-form-checkbox-label-description').textContent.trim(), 'Hello world');
+ assert.ok(await find('input'));
});
test('it displays optional errors', async function (assert) {
diff --git a/ui/core/app/components/form/host-set/hosts/index.hbs b/ui/core/app/components/form/host-set/hosts/index.hbs
index 558d4d10b..1943e26aa 100644
--- a/ui/core/app/components/form/host-set/hosts/index.hbs
+++ b/ui/core/app/components/form/host-set/hosts/index.hbs
@@ -33,14 +33,13 @@
{{#each this.options as |option|}}
-
+
- {{option.host.description}}
-
+ onChange={{fn @toggleHost option.host}} />
+
{{option.host.name}}
{{option.host.address}}
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 1a31665e6..ba08e2b36 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -30,4 +30,13 @@
p {
margin-bottom: 0;
}
+
+ .rose-form-checkbox {
+ margin-bottom: 0;
+
+ .rose-form-checkbox-label-text {
+ color: var(--stark);
+ text-decoration: underline;
+ }
+ }
}
diff --git a/ui/core/mirage/factories/host.js b/ui/core/mirage/factories/host.js
index eb463f1f9..f322cb4d4 100644
--- a/ui/core/mirage/factories/host.js
+++ b/ui/core/mirage/factories/host.js
@@ -1,3 +1,5 @@
import factory from '../generated/factories/host';
-export default factory.extend();
+export default factory.extend({
+ id: (i) => `host-id-${i}`
+});