diff --git a/changelog.txt b/changelog.txt
index 62b39fe6..4a314439 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,3 +1,6 @@
+Version x.x.x - x x, x
+- Fixed - Asterisk missing on required input label.
+
Version 1.2.2 - 4th December, 2024
- Improvement - Removed margin and added new props to the Line Chart component for customizability.
diff --git a/src/components/input/input.stories.tsx b/src/components/input/input.stories.tsx
index c97c38b9..4fee7533 100644
--- a/src/components/input/input.stories.tsx
+++ b/src/components/input/input.stories.tsx
@@ -79,3 +79,13 @@ WithPrefixSuffix.args = {
suffix: '#',
defaultValue: '',
};
+
+// Required Input with Label
+export const Required = Template.bind( {} );
+Required.args = {
+ type: 'text',
+ size: 'sm',
+ required: true,
+ label: 'Required Input',
+ defaultValue: 'Required Input',
+};
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index 839ffe40..50974e47 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -5,10 +5,12 @@ import React, {
forwardRef,
useRef,
type ReactNode,
+ LabelHTMLAttributes,
} from 'react';
import { nanoid } from 'nanoid';
import { cn } from '@/utilities/functions';
import { Upload, X } from 'lucide-react';
+import Label from '../label';
export declare interface InputProps {
/** Unique identifier for the input element. */
@@ -52,6 +54,9 @@ export declare interface InputProps {
/** Placeholder text for the input field. */
placeholder?: string;
+
+ /** Indicates whether the input is required. */
+ required?: boolean;
}
export const InputComponent = (
@@ -245,12 +250,13 @@ export const InputComponent = (
return null;
}
return (
-
+
);
}, [ label, size, inputId ] );
diff --git a/src/components/label/label.tsx b/src/components/label/label.tsx
index b9fd168e..7a261cad 100644
--- a/src/components/label/label.tsx
+++ b/src/components/label/label.tsx
@@ -17,7 +17,7 @@ export interface LabelProps {
}
const Label = forwardRef(
- (
+ (
{
children = null,
tag: Tag = 'label',
@@ -26,7 +26,7 @@ const Label = forwardRef(
variant = 'neutral', // neutral, help, error, disabled
required = false,
...props
- }: LabelProps,
+ }: LabelProps & T,
ref: React.Ref
) => {
// Base classes. - Mandatory classes.
@@ -78,4 +78,7 @@ const Label = forwardRef(
}
);
-export default Label;
+export default Label as (
+ props: LabelProps & T,
+ ref: React.Ref
+) => React.ReactNode;