OAuth 2 (#158)

src-web/components/core/Label.tsx

@@ -4,30 +4,32 @@ import type { HTMLAttributes } from 'react';
 export function Label({
   htmlFor,
   className,
-  optional,
   children,
   visuallyHidden,
-  otherTags = [],
+  tags = [],
+  required,
   ...props
 }: HTMLAttributes<HTMLLabelElement> & {
   htmlFor: string;
-  optional?: boolean;
-  otherTags?: string[];
+  required?: boolean;
+  tags?: string[];
   visuallyHidden?: boolean;
 }) {
-  const tags = optional ? ['optional', ...otherTags] : otherTags;
   return (
     <label
+      htmlFor={htmlFor}
       className={classNames(
         className,
         visuallyHidden && 'sr-only',
-        'flex-shrink-0',
+        'flex-shrink-0 text-sm',
         'text-text-subtle whitespace-nowrap flex items-center gap-1',
       )}
-      htmlFor={htmlFor}
       {...props}
     >
-      {children}
+      <span>
+        {children}
+        {required === true && <span className="text-text-subtlest">*</span>}
+      </span>
       {tags.map((tag, i) => (
         <span key={i} className="text-xs text-text-subtlest">
           ({tag})