feat(radio): add example with helptext and errortext

Author: anitavincent

packages/components/src/field/field.css

@@ -1,5 +1,4 @@
 @layer sl-components {
-
   [data-sl-field] {
     display: grid;
     grid-template-areas: var(--sl-element-template-areas);
@@ -30,8 +29,8 @@
     &[data-variant='control'] {
       --sl-element-template-areas: 'input label' '- message';
       --sl-element-label-color: var(--sl-fg);
-      --sl-element-vertical-gap: var(--sl-space-0);
       --sl-element-vertical-gap: calc(var(--sl-space-05) / 2);
+      --sl-element-horizontal-gap: var(--sl-space-2);
     }
   }
 }

packages/components/src/radio/stories/radio.stories.tsx

@@ -104,10 +104,23 @@ export function Help() {
         <Radio value="opt4">Another pen</Radio>
       </RadioGroup>
 
+      <RadioGroup
+        label="Optional group"
+        errorText="Something is wrong"
+        helpText="Pen pinapple apple pen"
+      >
+        <Radio value="opt1">Pen</Radio>
+        <Radio value="opt2">Pineapple</Radio>
+        <Radio value="opt3">Apple</Radio>
+        <Radio value="opt4">Another pen</Radio>
+      </RadioGroup>
+
+
       <RadioGroup
         label="Optional group (optional)"
         errorText="Something is wrong"
         helpText="Pen pinapple apple pen"
+        error
       >
         <Radio value="opt1">Pen</Radio>
         <Radio value="opt2">Pineapple</Radio>