Merge pull request #765 from maiieul/input-name-to-id-prop

refactor(styled input/checkbox/textarea): improve handling of name/id props

Author: maiieul

packages/kit-styled/src/components/checkbox/checkbox.tsx

@@ -1,7 +1,8 @@
 import { PropsOf, component$ } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
-export const Checkbox = component$<PropsOf<'input'>>(({ name, ...props }) => {
+export const Checkbox = component$<PropsOf<'input'>>(({ id, name, ...props }) => {
+  const inputId = id || name;
   return (
     <input
       type="checkbox"
@@ -10,8 +11,7 @@ export const Checkbox = component$<PropsOf<'input'>>(({ name, ...props }) => {
         'peer peer h-4 w-4 shrink-0 border-primary text-primary accent-primary ring-offset-background focus:ring-ring focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
         props.class,
       )}
-      name={name}
-      id={name}
+      id={inputId}
     />
   );
 });

packages/kit-styled/src/components/input/input.tsx

@@ -12,23 +12,25 @@ export const Input = component$<InputProps>(
     'bind:value': valueSig,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     'bind:checked': checkedSig,
+    id,
     ...props
   }) => {
+    const inputId = id || name;
     return (
       <>
         <input
           {...props}
-          aria-errormessage={`${name}-error`}
+          aria-errormessage={`${inputId}-error`}
           aria-invalid={!!error}
           bind:value={valueSig}
           class={cn(
             'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
             props.class,
           )}
-          id={name}
+          id={inputId}
         />
         {error && (
-          <div id={`${name}-error`} class="text-destructive mt-1 text-sm">
+          <div id={`${inputId}-error`} class="text-destructive mt-1 text-sm">
             {error}
           </div>
         )}

packages/kit-styled/src/components/textarea/textarea.tsx

@@ -5,7 +5,8 @@ type TextareaProps = PropsOf<'textarea'> & {
   error?: string;
 };
 
-export const Textarea = component$<TextareaProps>(({ name, error, ...props }) => {
+export const Textarea = component$<TextareaProps>(({ id, name, error, ...props }) => {
+  const textareaId = id || name;
   return (
     <>
       <textarea
@@ -14,8 +15,9 @@ export const Textarea = component$<TextareaProps>(({ name, error, ...props }) =>
           '[&::-webkit-scrollbar-track]:bg-blue flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
           props.class,
         )}
+        id={textareaId}
       />
-      {error && <div id={`${name}-error`}>{error}</div>}
+      {error && <div id={`${textareaId}-error`}>{error}</div>}
     </>
   );
 });