From 53be75b7d5870bddff84cfdc23ff42cfa65845a9 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sat, 8 Oct 2022 21:20:05 +0800
Subject: [PATCH] [ui][select] support required

---
 apps/storybook/stories/select.stories.tsx | 29 +++++++++++++++++++++++
 packages/ui/src/Select/Select.tsx         |  8 +++++++
 2 files changed, 37 insertions(+)

diff --git a/apps/storybook/stories/select.stories.tsx b/apps/storybook/stories/select.stories.tsx
index 145936ed..35c74362 100644
--- a/apps/storybook/stories/select.stories.tsx
+++ b/apps/storybook/stories/select.stories.tsx
@@ -177,6 +177,35 @@ export function Disabled() {
   );
 }
 
+export function Required() {
+  const [value, setValue] = useState('apple');
+
+  return (
+    <div className="space-x-4">
+      <Select
+        label="Select a fruit"
+        options={[
+          {
+            label: 'Apple',
+            value: 'apple',
+          },
+          {
+            label: 'Banana',
+            value: 'banana',
+          },
+          {
+            label: 'Orange',
+            value: 'orange',
+          },
+        ]}
+        required={true}
+        value={value}
+        onChange={setValue}
+      />
+    </div>
+  );
+}
+
 export function Uncontrolled() {
   return (
     <div className="space-x-4">
diff --git a/packages/ui/src/Select/Select.tsx b/packages/ui/src/Select/Select.tsx
index 67acf5a9..d3af3e00 100644
--- a/packages/ui/src/Select/Select.tsx
+++ b/packages/ui/src/Select/Select.tsx
@@ -43,6 +43,7 @@ function Select<T>(
     label,
     isLabelHidden,
     options,
+    required,
     value,
     onChange,
     ...props
@@ -58,6 +59,12 @@ function Select<T>(
           className={clsx('mb-1 block text-sm font-medium text-slate-700')}
           htmlFor={id ?? undefined}>
           {label}
+          {required && (
+            <span aria-hidden="true" className="text-danger-500">
+              {' '}
+              *
+            </span>
+          )}
         </label>
       )}
       <select
@@ -72,6 +79,7 @@ function Select<T>(
         defaultValue={defaultValue != null ? String(defaultValue) : undefined}
         disabled={disabled}
         id={id}
+        required={required}
         value={value != null ? String(value) : undefined}
         onChange={(event) => {
           onChange?.(event.target.value);