diff --git a/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx b/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
index fe92b59ec..11405c643 100644
--- a/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
@@ -16,7 +16,6 @@ Renders a form input checkbox.
@checked={{false}}
@error={{false}}
@disabled={{false}}
- @inline={{true}}
/>
```
@@ -69,3 +68,60 @@ Renders a form input checkbox.
}
}}
+
+
+```htmlbars
+
+```
+
+
+ {{
+ template: hbs`
+
+
+
+ `,
+ context: {
+ description: text('description', 'Short description in label'),
+ helperText: text('helperText', 'This is an optional help text.'),
+ checked: boolean('checked', false),
+ error: boolean('error', false),
+ disabled: boolean('disabled', false),
+ }
+ }}
+
+
diff --git a/addons/rose/addon/components/rose/form/radio/group/index.hbs b/addons/rose/addon/components/rose/form/radio/group/index.hbs
index fc34bd1cc..de2b010b6 100644
--- a/addons/rose/addon/components/rose/form/radio/group/index.hbs
+++ b/addons/rose/addon/components/rose/form/radio/group/index.hbs
@@ -1,3 +1,3 @@
{{yield (hash
- radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed)
-)}}
+ radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed inline=@inline)
+)}}
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
index bafffaaa4..515c7ca35 100644
--- a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
@@ -15,6 +15,7 @@ Renders a form radiofield group.
@name={{name}}
@selectedValue="disagree"
@changed={{fn}}
+ @inline={{false}}
as |radioGroup|
>
```
@@ -55,3 +54,70 @@ Renders a form radiofield.
}
}}
+
+
+```htmlbars
+
+```
+
+
+ {{
+ template: hbs`
+
+
+
+ `,
+ context: {
+ error: boolean('error', false),
+ value: text('value', 'value and selectedValue must match to select radiofield'),
+ selectedValue: text(
+ 'selectedValue',
+ 'value and selectedValue must match to select radiofield'
+ ),
+ disabled: boolean('disabled', false),
+ icon: select(
+ 'icon',
+ {
+ 'none': null,
+ 'user-organization': 'user-organization',
+ 'copy-action': 'copy-action',
+ 'unfold-more': 'unfold-more',
+ 'unfold-less': 'unfold-less',
+ },
+ null
+ ),
+ }
+ }}
+
\ No newline at end of file
diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index 723407017..f248d0b7a 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -21,14 +21,17 @@ $radio-svg: (
);
$data-svg-prefix: 'data:image/svg+xml;utf-8,';
-.radio-group-inline {
- display: flex;
- .rose-form-radio {
+ .rose-form-radio {
+ &.inline {
+ display: inline-block;
+ .rose-form-radio-label {
+ margin-right: sizing.rems(s);
+ }
+ }
+ .radio-group-inline {
+ display: flex;
margin-right: sizing.rems(s);
}
-}
-
-.rose-form-radio {
@include type.type(m);
position: relative;
margin-bottom: sizing.rems(xs);