{{#let (uniqueId) as |uuid|}}
@@ -19,7 +28,9 @@ const FKControlRadioGroupRadio =
...attributes
{{on "change" (withEventValue @field.set)}}
/>
- {{yield}}
+
+ {{yield (hash Title=radioTitle Description=radioDescription)}}
+
{{/let}}
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/radio-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/radio-test.gjs
new file mode 100644
index 00000000000..1357e74c535
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/radio-test.gjs
@@ -0,0 +1,45 @@
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import Form from "discourse/components/form";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+
+module(
+ "Integration | Component | FormKit | Controls | Radio",
+ function (hooks) {
+ setupRenderingTest(hooks);
+
+ test("default", async function (assert) {
+ await render(
+
+
+ One
+
+
+
+ );
+
+ assert.dom(".form-kit__control-radio-content").hasText("One");
+ });
+
+ test("title/description", async function (assert) {
+ await render(
+
+
+
+ One title
+ One description
+
+
+
+
+ );
+
+ assert.dom(".form-kit__control-radio-title").hasText("One title");
+ assert
+ .dom(".form-kit__control-radio-description")
+ .hasText("One description");
+ });
+ }
+);
diff --git a/app/assets/stylesheets/common/form-kit/_control-radio.scss b/app/assets/stylesheets/common/form-kit/_control-radio.scss
index 225365db816..a925d7b6ed5 100644
--- a/app/assets/stylesheets/common/form-kit/_control-radio.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-radio.scss
@@ -1,18 +1,26 @@
-.form-kit__control-radio {
- &-label {
- display: flex;
- gap: 0.5em;
- font-weight: normal !important;
- margin: 0;
- color: var(--primary);
+.form-kit__control-radio-label {
+ display: flex;
+ gap: 0.5em;
+ font-weight: normal !important;
+ margin: 0;
+ color: var(--primary);
- .form-kit__field[data-disabled] & {
- cursor: not-allowed;
- }
- input[type="radio"] {
- margin-right: 0; //old input overrule
- }
+ .form-kit__field[data-disabled] & {
+ cursor: not-allowed;
}
+ input[type="radio"] {
+ margin-right: 0; //old input overrule
+ }
+}
+
+.form-kit__control-radio-content {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+
+.form-kit__control-radio-description {
+ color: var(--primary-medium);
}
.form-kit__inline-radio {
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/05-forms.hbs b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/05-forms.hbs
index 500051d4d55..e002dea9ea4 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/05-forms.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/05-forms.hbs
@@ -117,10 +117,15 @@
+
Yes
- No
+
+ No
+
+ Choosing no, will make you inelligible for the contest.
+
+