style(label): add asterisk for required inputs

indielayer · Oct 19, 2024 · c17ac2d · c17ac2d
1 parent 6d95905
commit c17ac2d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/.changeset/chilled-cycles-burn.md b/.changeset/chilled-cycles-burn.md
@@ -0,0 +1,5 @@
+---
+"@indielayer/ui": patch
+---
+
+style(label): add asterisk on theme for required inputs
diff --git a/packages/ui/docs/pages/component/form/usage.vue b/packages/ui/docs/pages/component/form/usage.vue
@@ -39,7 +39,9 @@ function onSubmit(isValid: string) {
       :rules="[rules.isRequired, rules.isEmail]"
       name="email"
       label="Email"
+      required
       placeholder="Enter your email"
+      tooltip="We will never share your email with anyone"
     />
     <x-input
       v-model="password"

diff --git a/packages/ui/src/components/label/theme/Label.base.theme.ts b/packages/ui/src/components/label/theme/Label.base.theme.ts
@@ -12,12 +12,14 @@ const theme: LabelTheme = {
     },
 
     label: ({ props }) => {
-      const classes = 'flex items-center gap-2 font-medium text-secondary-800 dark:text-secondary-200 mb-1'
+      const classes = ['flex items-center gap-2 font-medium text-secondary-800 dark:text-secondary-200 mb-1']
 
-      if (props.size === 'xs') return classes + ' text-xs'
-      else if (props.size === 'sm') return classes + ' text-sm'
-      else if (props.size === 'lg') return classes + ' text-lg'
-      else if (props.size === 'xl') return classes + ' text-xl'
+      if (props.size === 'xs') classes.push('text-xs')
+      else if (props.size === 'sm') classes.push('text-sm')
+      else if (props.size === 'lg') classes.push('text-lg')
+      else if (props.size === 'xl') classes.push('text-xl')
+
+      if (props.required) classes.push('[&_span]:after:content-["*"] [&_span]:after:ml-0.5 [&_span]:after:text-error-500')
 
       return classes
     },