diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index 042220c..f1a7564 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx @@ -9,7 +9,7 @@ export interface InputProps { label?: string placeholder?: string disabled?: boolean, - description?: string + description?: string | ReactNode leftSection?: string | ReactNode rightSection?: string | ReactNode } @@ -39,9 +39,11 @@ const Input: React.FC = ({ ` return (
- +
+ +
- {description} + {description}
); }; diff --git a/packages/forms/stories/Input.stories.tsx b/packages/forms/stories/Input.stories.tsx index 8e9cb0a..f4757fd 100644 --- a/packages/forms/stories/Input.stories.tsx +++ b/packages/forms/stories/Input.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Meta } from '@storybook/react'; import Toggle, { ToggleProps } from '../src/toggle'; -import { FaMoon, FaSun } from 'react-icons/fa6'; +import { HiOutlineQuestionMarkCircle } from 'react-icons/hi2'; import Text from '../../typography/src/text'; import Input from '../src/input'; @@ -21,6 +21,23 @@ export const BasicInput = (args: ToggleProps) => ( ) +export const LabelAndHelperText = (args: ToggleProps) => ( + <> +
+ Input with Label + +
+
+ Input with Description + + + Helping text for user + + }> +
+ +) export const InputGroup = (args: ToggleProps) => ( <>