feat(radio): add description field

cft-group · Oct 23, 2020 · 467fcf8 · 467fcf8
1 parent ab9b3d3
commit 467fcf8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/src/packages/core/src/radio/Radio.stories.mdx b/src/packages/core/src/radio/Radio.stories.mdx
@@ -13,6 +13,11 @@ import { Radio } from '.';
   <Radio name="radio1" label="Option 2" />
 </Preview>
 
+<Preview>
+  <Radio name="radio1" label="Option 1" description="Description 1" checked />
+  <Radio name="radio1" label="Option 2" description="Description 2" />
+</Preview>
+
 <Preview>
   <Radio name="radio2" label="Option 1" checked readonly />
   <Radio name="radio2" label="Option 2" readonly />

diff --git a/src/packages/core/src/radio/Radio.tsx b/src/packages/core/src/radio/Radio.tsx
@@ -7,6 +7,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props: RadioProps
   const {
     className,
     defaultChecked,
+    description,
     disabled = false,
     id,
     label,
@@ -38,6 +39,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props: RadioProps
       <span className="_e_radio__icon" />
       <span className="_e_radio__label">
         { label }
+        { description && <span className="_e_radio__desc">{ description }</span> }
       </span>
     </label>
   );

diff --git a/src/packages/core/src/radio/types.ts b/src/packages/core/src/radio/types.ts
@@ -16,6 +16,11 @@ export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
    */
   defaultChecked?: boolean;
 
+  /**
+   * Radio description.
+   */
+  description?: string;
+
   /**
    * Radio disabled state.
    * @default false