From 0062199bd6f26ecb362a7c4cffe3a69bb58b342e Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Thu, 6 Oct 2022 18:14:57 +0800
Subject: [PATCH] [ui][text input] add asterisk to label for required fields

---
 apps/storybook/stories/text-input.stories.tsx | 14 ++++++++++++++
 packages/ui/src/TextInput/TextInput.tsx       |  3 +++
 2 files changed, 17 insertions(+)

diff --git a/apps/storybook/stories/text-input.stories.tsx b/apps/storybook/stories/text-input.stories.tsx
index 03bd842a..bb5a9220 100644
--- a/apps/storybook/stories/text-input.stories.tsx
+++ b/apps/storybook/stories/text-input.stories.tsx
@@ -30,6 +30,9 @@ export default {
     placeholder: {
       control: 'text',
     },
+    required: {
+      control: 'boolean',
+    },
     type: {
       control: 'text',
     },
@@ -111,6 +114,17 @@ export function Disabled() {
   );
 }
 
+export function Required() {
+  return (
+    <TextInput
+      label="Required input"
+      placeholder="John Doe"
+      required={true}
+      type="text"
+    />
+  );
+}
+
 export function Error() {
   const [value, setValue] = useState('1234');
 
diff --git a/packages/ui/src/TextInput/TextInput.tsx b/packages/ui/src/TextInput/TextInput.tsx
index ebb08328..192f2737 100644
--- a/packages/ui/src/TextInput/TextInput.tsx
+++ b/packages/ui/src/TextInput/TextInput.tsx
@@ -56,6 +56,7 @@ function TextInput(
     id: idParam,
     isLabelHidden = false,
     label,
+    required,
     startIcon: StartIcon,
     type = 'text',
     value,
@@ -80,6 +81,7 @@ function TextInput(
         )}
         htmlFor={id}>
         {label}
+        {required && <span className="text-danger-500 not-sr-only"> *</span>}
       </label>
       <div className="relative mt-1">
         {StartIcon && (
@@ -101,6 +103,7 @@ function TextInput(
           defaultValue={defaultValue}
           disabled={disabled}
           id={id}
+          required={required}
           type={type}
           value={value != null ? value : undefined}
           onChange={(event) => {