✨ Add ability to pass data attributes to input elements

Author: Frontendland

src/components/Checkbox/Checkbox.astro

@@ -15,7 +15,8 @@ const {
     subText,
     disabled,
     color,
-    className
+    className,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -34,7 +35,12 @@ const style = color
         <div class={styles.wrapper} slot="wrapper">
             children
         </div>
-        <input type="checkbox" checked={checked} disabled={disabled} />
+        <input
+            type="checkbox"
+            checked={checked}
+            disabled={disabled}
+            {...rest}
+        />
         <span class={styles.check}>
             <Fragment set:html={check} />
         </span>

src/components/Checkbox/Checkbox.svelte

@@ -39,6 +39,7 @@
             checked={checked}
             disabled={disabled}
             on:click={onClick}
+            {...$$restProps}
         />
         <span class={styles.check}>
             {@html check}

src/components/Checkbox/Checkbox.tsx

@@ -16,7 +16,8 @@ const Checkbox = ({
     disabled,
     color,
     className,
-    onClick
+    onClick,
+    ...rest
 }: ReactCheckboxProps) => {
     const classes = classNames([
         styles.checkbox,
@@ -43,6 +44,7 @@ const Checkbox = ({
                     defaultChecked={checked}
                     disabled={disabled}
                     onClick={onClick}
+                    {...rest}
                 />
                 <span
                     className={styles.check}

src/components/Checkbox/checkbox.ts

@@ -7,6 +7,7 @@ export type CheckboxProps = {
     disabled?: boolean
     color?: string
     className?: string
+    [key: string]: any
 }
 
 export type SvelteCheckboxProps = {

src/components/Radio/Radio.astro

@@ -12,7 +12,8 @@ const {
     items,
     color,
     inline,
-    className
+    className,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -42,6 +43,7 @@ const style = color
                     value={item.value}
                     checked={item.selected}
                     disabled={item.disabled}
+                    {...rest}
                 />
                 <span class={styles.icon} />
                 <span class={styles.label}>

src/components/Radio/Radio.svelte

@@ -27,10 +27,10 @@
 
 <div class={classes} style={style}>
     {#each items as item}
-        <label class={[
+        <label class={classNames([
             item.subText && styles.col,
             item.disabled && styles.disabled
-        ].filter(Boolean).join(' ')}
+        ])}
         >
             <ConditionalWrapper
                 condition={!!(item.subText)}
@@ -44,6 +44,7 @@
                     checked={item.selected}
                     disabled={item.disabled}
                     on:change={onChange}
+                    {...$$restProps}
                 />
                 <span class={styles.icon} />
                 <span class={styles.label}>

src/components/Radio/Radio.tsx

@@ -13,7 +13,8 @@ const Radio = ({
     color,
     inline,
     className,
-    onChange
+    onChange,
+    ...rest
 }: ReactRadioProps) => {
     const classes = classNames([
         styles.radio,
@@ -28,10 +29,10 @@ const Radio = ({
     return (
         <div className={classes} style={style}>
             {items.map((item, index) => (
-                <label className={[
+                <label className={classNames([
                     item.subText && styles.col,
                     item.disabled && styles.disabled
-                ].filter(Boolean).join(' ')} key={index}>
+                ])} key={index}>
                     <ConditionalWrapper
                         condition={!!(item.subText)}
                         wrapper={children => (
@@ -47,6 +48,7 @@ const Radio = ({
                             defaultChecked={item.selected}
                             disabled={item.disabled}
                             onChange={onChange}
+                            {...rest}
                         />
                         <span className={styles.icon} />
                         <span

src/components/Radio/radio.ts

@@ -10,6 +10,7 @@ export type RadioProps = {
     color?: string
     inline?: boolean
     className?: string
+    [key: string]: any
 }
 
 export type SvelteRadioProps = {

src/components/Select/Select.astro

@@ -27,6 +27,10 @@ const {
     ...rest
 } = Astro.props
 
+const inputRestProps = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.includes('data'))
+)
+
 const classes = classNames([
     styles.select,
     disabled && styles.disabled,
@@ -46,6 +50,7 @@ const classes = classNames([
     data-no-update={!updateValue ? 'true' : undefined}
     data-position={position}
     labelClassName={classes}
+    {...inputRestProps}
 >
     <Fragment set:html={ArrowDown} />
 </Input>

src/components/Select/Select.svelte

@@ -42,6 +42,10 @@
         styles.popover
     ])
 
+    const inputRestProps = Object.fromEntries(
+        Object.entries($$restProps).filter(([key]) => key.includes('data'))
+    )
+
     const select = (event: ListEventType) => {
         closePopover(`.w-options-${name}`)
 
@@ -106,14 +110,15 @@
 
 <Input
     type="text"
-    value={value}
+    value={value || null}
     readonly={true}
     disabled={disabled}
-    placeholder={placeholder}
+    placeholder={placeholder || null}
     label={label}
     subText={subText}
     className={`w-select-${name}`}
     labelClassName={classes}
+    {...inputRestProps}
 >
     {@html ArrowDown}
 </Input>