[ui][text input] add asterisk to label for required fields

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');
 

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) => {