diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.hbs b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
index 47621405d..edecc3ba8 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.hbs
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
@@ -22,7 +22,11 @@
{{/if}}
{{@label}}
-
+ {{#if @helperText}}
+
+ {{@helperText}}
+
+ {{/if}}
{{yield}}
diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
index 63e873862..613952aff 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
@@ -29,12 +29,14 @@ Renders a form radiofield.
@selectedValue={{selectedValue}}
@disabled={{disabled}}
@icon={{icon}}
+ @helperText={{helperText}}
/>
`,
context: {
label: text('text', 'Radiofield'),
error: boolean('error', false),
value: text('value', 'value and selectedValue must match to select radiofield'),
+ helperText: text('helperText', 'Helper text'),
selectedValue: text(
'selectedValue',
'value and selectedValue must match to select radiofield'
@@ -63,6 +65,7 @@ Renders a form radiofield.
@disabled={{false}}
@changed={{fn}}
@inline={{true}}
+ @helperText={{helperText}}
/>
```
@@ -77,6 +80,7 @@ Renders a form radiofield.
@disabled={{disabled}}
@icon={{icon}}
@inline={{inline}}
+ @helperText={{helperText}}
/>
`,
context: {
@@ -104,6 +110,7 @@ Renders a form radiofield.
'selectedValue',
'value and selectedValue must match to select radiofield'
),
+ helperText: text('helperText', 'Helper text'),
disabled: boolean('disabled', false),
icon: select(
'icon',
diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index 3c94ac816..32be9a8c5 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -1,5 +1,6 @@
@use '../../variables/sizing';
@use '../../utilities/type';
+@use '../../variables/typography';
$radio-svg: (
'default':
@@ -34,9 +35,18 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
color: var(--ui-gray);
.rose-form-radio-label {
+ display: flex;
+ align-items: center;
+ .rose-form-helper-text {
+ font-weight: normal;
+ margin-left: sizing.rems(xxs);
+ margin-bottom: 0;
+ }
+
@include type.type(s, semibold);
color: currentColor;
padding-left: sizing.rems(l);
+ padding-top: sizing.rems(xxxs);
.rose-icon {
margin-right: sizing.rems(xxs);