diff --git a/addons/rose/addon/components/rose/form/select/index.hbs b/addons/rose/addon/components/rose/form/select/index.hbs
index 7210298ec..565643e5f 100644
--- a/addons/rose/addon/components/rose/form/select/index.hbs
+++ b/addons/rose/addon/components/rose/form/select/index.hbs
@@ -1,16 +1,13 @@
-
+{{/if}}
diff --git a/addons/rose/addon/components/rose/form/select/index.stories.mdx b/addons/rose/addon/components/rose/form/select/index.stories.mdx
index 114c205a0..6574fcd53 100644
--- a/addons/rose/addon/components/rose/form/select/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/select/index.stories.mdx
@@ -112,3 +112,28 @@ Renders a form select element.
}
}}
+
+
+ {{
+ template: hbs`
+
+
+ Label
+
+ Help
+
+
+ Value 1
+ Value 2
+ Value 3
+
+
+
+ An error occurred.
+
+
+
+ `,
+ context: {},
+ }}
+
diff --git a/addons/rose/addon/components/rose/form/textarea/index.hbs b/addons/rose/addon/components/rose/form/textarea/index.hbs
index f9dd29891..8bc67af1a 100644
--- a/addons/rose/addon/components/rose/form/textarea/index.hbs
+++ b/addons/rose/addon/components/rose/form/textarea/index.hbs
@@ -1,26 +1,50 @@
-
+{{/if}}
diff --git a/addons/rose/addon/components/rose/form/textarea/index.stories.mdx b/addons/rose/addon/components/rose/form/textarea/index.stories.mdx
index e1f9aad3b..5851d4b12 100644
--- a/addons/rose/addon/components/rose/form/textarea/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/textarea/index.stories.mdx
@@ -70,3 +70,24 @@ Renders a simple form textarea.
}
}}
+
+
+ {{
+ template: hbs`
+
+
+ Label
+
+ Help
+
+
+
+
+ An error occurred.
+
+
+
+ `,
+ context: {},
+ }}
+
diff --git a/addons/rose/tests/integration/components/rose/form/select-test.js b/addons/rose/tests/integration/components/rose/form/select-test.js
index 3e4dd1df0..692efe098 100644
--- a/addons/rose/tests/integration/components/rose/form/select-test.js
+++ b/addons/rose/tests/integration/components/rose/form/select-test.js
@@ -144,4 +144,28 @@ module('Integration | Component | rose/form/select', function (hooks) {
`);
await fillIn('[name="my-select"]', 'value-1');
});
+
+ test('it supports a fully contextual usage', async function (assert) {
+ assert.expect(5);
+ await render(hbs`
+
+ Label
+ Help
+
+ value-1
+
+
+ An error occurred.
+
+
+ `);
+ assert.notOk(
+ find('.rose-form-input'),
+ 'The form field wrapper element is not present in contextual mode'
+ );
+ assert.ok(find('.rose-form-label.error'));
+ assert.ok(find('.rose-form-helper-text.error'));
+ assert.ok(find('.rose-form-select-field.error'));
+ assert.ok(find('.rose-form-error-message'));
+ });
});
diff --git a/addons/rose/tests/integration/components/rose/form/textarea-test.js b/addons/rose/tests/integration/components/rose/form/textarea-test.js
index 56c698e61..938aeba9d 100644
--- a/addons/rose/tests/integration/components/rose/form/textarea-test.js
+++ b/addons/rose/tests/integration/components/rose/form/textarea-test.js
@@ -57,4 +57,26 @@ module('Integration | Component | rose/form/textarea', function (hooks) {
await render(hbs``);
assert.ok(await find('.error'));
});
+
+ test('it supports a fully contextual usage', async function (assert) {
+ assert.expect(5);
+ await render(hbs`
+
+ Label
+ Help
+
+
+ An error occurred.
+
+
+ `);
+ assert.notOk(
+ find('.rose-form-input'),
+ 'The form field wrapper element is not present in contextual mode'
+ );
+ assert.ok(find('.rose-form-label.error'));
+ assert.ok(find('.rose-form-helper-text.error'));
+ assert.ok(find('.rose-form-input-field.error'));
+ assert.ok(find('.rose-form-error-message'));
+ });
});