Proper way for Input with icon

[15077693d]

Do there have official way to do the input with icon?
I got

my implementation but I would like to know is there have the proper way to do it?

import * as React from "react";

import { cn } from "@/utils";
import { MagnifyingGlassIcon } from "@radix-ui/react-icons";

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  icon?: React.ReactNode;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, icon, type, ...props }, ref) => {
    return (
      <div className="relative flex items-center">
        {icon}
        <input
          type={type}
          className={cn(
            "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
            className,
          )}
          ref={ref}
          {...props}
        />
      </div>
    );
  },
);
Input.displayName = "Input";

export { Input };

[steveafrost]

This looks good except it doesn't place the magnifying glass inside the input. This is because the classes for styling the input are directly on the input and not on the div surrounding both elements. Here's a screenshot.

Considering this, I moved styles to an outer div and allowed the same kind of customization as the input. Some styles need to be on the root div like focus-within (within because we're focusing the input not the div) and alignment then some styles need to be on the input itself like padding to get the click target correct.

export type SearchProps = React.InputHTMLAttributes<HTMLInputElement>;

const Search = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, ...props }, ref) => {
    return (
      <div
        className={cn(
          "flex h-10 items-center rounded-md border border-input bg-white pl-3 text-sm ring-offset-background focus-within:ring-1 focus-within:ring-ring focus-within:ring-offset-2",
          className,
        )}
      >
        <SearchIcon className="h-[16px] w-[16px]" />
        <input
          {...props}
          type="search"
          ref={ref}
          className="w-full p-2 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
        />
      </div>
    );
  },
);

Search.displayName = "Search";

export { Search };

This snippet appears as such with icon inside the input. Note though it's not inside the input, it's inside the div which is styled to look like an input.

[remyr]

That works, but you loose the ability to click on the icon and get focus to the input.
So it depends what behavior you want. If you want to click on the icon and get the focus, you have to put the icon in absolute and add pointer-events-none

[ederbiason]

I've tried to use the group tag from tailwindcss, but it didn't work. Even adding absolute and pointer-events-none I had no success

[sandeepsanofi]

This is how i was able to get the icon in the inputarea

<div className="relative h-10 w-full">  
  <MessageSquareText className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 z-10" />
  <Input
    type="text"
    placeholder="Enter your comment here"
    className="pl-10 pr-3 py-2 text-md w-full border border-gray-300 rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-[#6E23DD] focus:border-transparent" // Add additional styling as needed
    value=""
    
  />
</div>

[bernard-official]

i tried your method and it didn't work as excepted

[sandeepsanofi]

can you please send the screenshot? the attached screenshot is not visible. Also this guy is from ludice-react you can use any icon library

[PhilStar101]

Maybe it's better to change div to label, then click to icon will focus input

[vidhanshu]

I did this way,

import * as React from "react";

import { cn } from "@ui/lib/utils";
import { LucideIcon } from "lucide-react";

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  startIcon?: LucideIcon;
  endIcon?: LucideIcon;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, startIcon, endIcon, ...props }, ref) => {
    const StartIcon = startIcon;
    const EndIcon = endIcon;

    return (
      <div className="w-full relative">
        {StartIcon && (
          <div className="absolute left-1.5 top-1/2 transform -translate-y-1/2">
            <StartIcon size={18} className="text-muted-foreground" />
          </div>
        )}
        <input
          type={type}
          className={cn(
            "flex h-10 w-full rounded-md border border-input bg-background py-2 px-4 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
            startIcon ? "pl-8" : "",
            endIcon ? "pr-8" : "",
            className
          )}
          ref={ref}
          {...props}
        />
        {EndIcon && (
          <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
            <EndIcon className="text-muted-foreground" size={18} />
          </div>
        )}
      </div>
    );
  }
);
Input.displayName = "Input";

export { Input };

and then can use like this:

<Input startIcon={Lock}  type="password" placeholder="Password"/>

[fernandortec]

If someone is using other lib for icons such as react-icons or radix icons change the Input Props to the following

export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   startIcon?:
   	| IconType
   	| React.ForwardRefExoticComponent<
   			IconProps & React.RefAttributes<SVGSVGElement>
   	  >;
   endIcon?:
   	| IconType
   	| React.ForwardRefExoticComponent<
   			IconProps & React.RefAttributes<SVGSVGElement>
   	  >;
}

[vidhanshu]

if wan't to have a password show/hide btn as well, you can modify it as follows:

import * as React from "react";

import { cn } from "@ui/lib/utils";
import { Eye, EyeOff, Lock, LucideIcon, LucideProps } from "lucide-react";

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  startIcon?: LucideIcon;
  endIcon?: LucideIcon;
  iconProps?: LucideProps;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, startIcon, endIcon, iconProps = {}, ...props }, ref) => {
    const [show, setShow] = React.useState(false);
    const StartIcon = startIcon;
    const EndIcon = endIcon;
    const { className: iconClassName, ...iconRest } = iconProps;

    if (type === "password") {
      return (
        <div className="w-full relative">
          <div className="absolute left-1.5 top-1/2 transform -translate-y-1/2">
            <Lock
              size={18}
              className={cn("text-muted-foreground", iconClassName)}
              {...iconRest}
            />
          </div>
          <input
            autoComplete="off"
            type={!show ? type : "text"}
            className={cn(
              "flex h-10 w-full rounded-md border border-input bg-background py-2 px-8 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
              className
            )}
            ref={ref}
            {...props}
          />
          <button
            onClick={() => setShow((prev) => !prev)}
            className="absolute right-3 top-1/2 transform -translate-y-1/2"
            type="button"
          >
            {show ? (
              <Eye className="stroke-slate-700/70" size={18} />
            ) : (
              <EyeOff className="stroke-slate-700/70" size={18} />
            )}
          </button>
        </div>
      );
    }

    return (
      <div className="w-full relative">
        {StartIcon && (
          <div className="absolute left-1.5 top-1/2 transform -translate-y-1/2">
            <StartIcon
              size={18}
              className={cn("text-muted-foreground", iconClassName)}
              {...iconRest}
            />
          </div>
        )}
        <input
          type={type}
          className={cn(
            "flex h-10 w-full rounded-md border border-input bg-background py-2 px-4 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
            startIcon ? "pl-8" : "",
            endIcon ? "pr-8" : "",
            className
          )}
          ref={ref}
          {...props}
        />
        {EndIcon && (
          <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
            <EndIcon
              className={cn("text-muted-foreground", iconClassName)}
              {...iconRest}
              size={18}
            />
          </div>
        )}
      </div>
    );
  }
);

I believe there would be a way to reduce the code duplication above, would love to know if any!

[xiaokuili]

When clicking on the input, the icon fails to deepen its color. Consider utilizing "peer" and "peer-focus".

import * as React from "react";
import { cn } from "@/lib/utils";

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  startIcon: any;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, startIcon, endIcon, ...props }, ref) => {
    const StartIcon = startIcon;
    const EndIcon = endIcon;

    return (
      <div className="w-full relative">
        <input
          type={type}
          className={cn(
            "peer flex h-10 w-full rounded-md border border-input bg-background py-2 px-4 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
            startIcon ? "pl-8" : "",
            endIcon ? "pr-8" : "",
            className
          )}
          ref={ref}
          {...props}
        />
        {StartIcon && (
          <StartIcon className=" absolute left-1.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500 peer-focus:text-gray-900" />
        )}
      </div>
    );
  }
);
Input.displayName = "Input";

export { Input };

[Albx68]

This is how I've modified it, since I'm passing start and end icons as react node, I can basically pass in anything and handle state on the parent itself.

`import * as React from 'react';

import { cn } from '@/lib/utils';

export interface InputProps
extends React.InputHTMLAttributes {
startIcon?: React.ReactNode;
endIcon?: React.ReactNode;
}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, startIcon, endIcon, ...props }, ref) => {
return (

{startIcon && (

{startIcon}

)}
<input
type={type}
className={cn(
'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base 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 md:text-sm',
className
)}
ref={ref}
{...props}
/>
{endIcon && (

{endIcon}

)}

);
}
);
Input.displayName = 'Input';

export { Input };
`
Usage

[Albx68]

[guiprais]

My solution:

import React from 'react'

import { SearchIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

export type InputProps = React.InputHTMLAttributes<HTMLInputElement>

const separatePaddingClasses = (className: string | undefined) => {
  const inputClassesPrefixes = [
    'p-',
    'px-',
    'py-',
    'pl-',
    'pr-',
    'pt-',
    'pb-',
    'placeholder:',
  ]
  const bothElementsClassesPrefixes = ['bg-']

  const allClasses = className ? className.split(' ') : []

  const bothElementsClasses = allClasses.filter((currentClass) =>
    bothElementsClassesPrefixes.some((prefix) =>
      currentClass.startsWith(prefix),
    ),
  )

  const inputClasses = allClasses.filter((currentClass) =>
    inputClassesPrefixes.some((prefix) => currentClass.startsWith(prefix)),
  )

  const otherClasses = allClasses.filter(
    (currentClass) =>
      !inputClassesPrefixes.some((prefix) => currentClass.startsWith(prefix)),
  )

  return {
    inputClasses: [...inputClasses, ...bothElementsClasses].join(' '),
    otherClasses: [...otherClasses, ...bothElementsClasses].join(' '),
  }
}

const SearchInput = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, placeholder, ...props }, ref) => {
    const { inputClasses, otherClasses } = separatePaddingClasses(className)

    return (
      <div
        className={cn(
          'relative flex rounded-lg border border-input bg-transparent pr-3 text-sm text-input shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-input-placeholder focus-within:border-primary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
          otherClasses,
        )}
      >
        <SearchIcon className="absolute right-4 top-1/2 z-10 -translate-y-1/2 transform text-primary" />
        <input
          type="text"
          placeholder={placeholder}
          className={cn(
            'w-full rounded-bl-lg rounded-tl-lg border-0 py-2.5 pl-3 outline-none',
            inputClasses,
          )}
          ref={ref}
          {...props}
        />
      </div>
    )
  },
)

SearchInput.displayName = 'Search'

export { SearchInput }

The separatePaddingClasses function takes a string of class names and categorizes them into two groups based on their prefixes: one for input-related classes (like padding and placeholder styles) and another for classes applicable to both the input and its container. This allows for the flexible reuse of the component throughout the application.

[lucas-barake]

You should be able to just compose it as such:

import { inputVariants } from "@/components";
import React from "react";
import { SearchIcon } from "lucide-react";

export const Search: React.FC = () => {
  return (
    <label
      className={inputVariants({
        className: "[&:has(:focus-visible)]:ring-ring flex items-center p-0 [&:has(:focus-visible)]:ring-2",
      })}
    >
      <span className="sr-only">Search</span>

      <SearchIcon className="size-4" />
      <input
        type="search"
        placeholder="Search"
        className="size-full ml-2 border-none bg-transparent focus:outline-none"
      />
    </label>
  );
};

Result:

On focus:

[dartenie]

What's inputVariants here?

[F-47]

I've just developed a solution that enhances input components. This solution allows for the seamless integration of icons with inputs, particularly adding support for icons in password inputs, complete with Caps Lock indication and eye icon toggling.

"use client";
import * as React from "react";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { ArrowBigUpDash, EyeIcon, EyeOffIcon } from "lucide-react";

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  Icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ Icon, className, type, ...props }, ref) => {
    const [showPassword, setShowPassword] = React.useState(false);
    const [capsLockActive, setCapsLockActive] = React.useState(false);

    const handleKeyPress: React.KeyboardEventHandler<HTMLInputElement> = (
      event
    ) => {
      const capsLockOn = event.getModifierState("CapsLock");
      setCapsLockActive(capsLockOn);
    };

    const togglePasswordVisibility = () => setShowPassword(!showPassword);

    const inputClasses = cn(
      "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
      Icon && "pl-10",
      type === "password" && (!capsLockActive ? "pr-8" : "pr-16"),
      className
    );

    return (
      <div className={cn("relative", className)}>
        {Icon && (
          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <Icon />
          </div>
        )}
        <input
          type={type === "password" && showPassword ? "text" : type}
          className={inputClasses}
          onKeyDown={handleKeyPress}
          ref={ref}
          {...props}
        />
        {type === "password" && (
          <div className="absolute right-0 flex items-center pr-3 -translate-y-1/2 top-1/2 gap-x-1">
            {showPassword ? (
              <EyeOffIcon
                className="cursor-pointer"
                onClick={togglePasswordVisibility}
                size={20}
              />
            ) : (
              <EyeIcon
                className="cursor-pointer"
                onClick={togglePasswordVisibility}
                size={20}
              />
            )}
            {capsLockActive && type === "password" && (
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <ArrowBigUpDash size={20} />
                  </TooltipTrigger>
                  <TooltipContent>
                    <p>Caps Lock is on!</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            )}
          </div>
        )}
      </div>
    );
  }
);
Input.displayName = "Input";

export { Input };

[ivandamyanov]

@F-47 Thanks for the implementation, it's great! I changed the Icon prop to be ReactElement because I can easily pass icons like <EyeIcon /> with styles from outside. Instead of Tooltip I use Popover, it sacrifices the hover effect but it's more mobile friendly if i am not wrong. Also, instead of using <input> I used the shadcn <Input />.

Also, in the outermost div, I added group focus-within:text-blue-600 - I control the icon colors using text-blue-600 and this way when the input is focused, I made the icons the same color as my input border color.

[F-47]

@ivandamyanov Wow that's are amazing changes too. I would love to see ur full code. Good Job❤️❤️

[jismonthomas]

This is what I did with my implimentation, this way you can customize the icon however you like. For example I can add a Tooltip to the icon and then pass it to the input field.

import * as React from 'react';

import { cn } from '@/lib/utils';

const InputWithIcon = React.forwardRef(
    ({ className, type, startIcon, endIcon, ...props }, ref) => {
        const StartIcon = startIcon;
        const EndIcon = endIcon;
        return (
            <div className="w-full relative">
                {StartIcon && (
                    <div className="absolute left-3 top-1/2 transform -translate-y-1/2">
                        <StartIcon.type
                            className={cn('h-[18px] w-[18px]')}
                            {...startIcon.props}
                        />
                    </div>
                )}
                <input
                    type={type}
                    className={cn(
                        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
                        startIcon ? 'pl-8' : '',
                        endIcon ? 'pr-8' : '',
                        className
                    )}
                    ref={ref}
                    {...props}
                />
                {EndIcon && (
                    <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
                        <EndIcon.type
                            className={cn('h-[18px] w-[18px]')}
                            {...endIcon.props}
                        />
                    </div>
                )}
            </div>
        );
    }
);
InputWithIcon.displayName = 'InputWithIcon';

export { InputWithIcon };

[aat-antoine]

Interesting solution. In this case what will be type of startIcon ?

[irfankurniawansuthiono]

TYSM!!

[ederbiason]

Interesting solution. In this case what will be type of startIcon ?

I think both startIcon and endIcon can have ReactNode as type, or ReactElement would work too

[minhajul-im]

This is an input field for entering a password. The icon next to it toggles the visibility of the password.

import * as React from "react";

import { cn } from "@/lib/utils";

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  icon?: React.ReactNode;
  onShow?: () => void;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, icon, onShow, ...props }, ref) => {
    return (
      <div
        className={cn(
          "flex h-10 items-center rounded-md border border-input bg-white pl-3 text-sm ring-offset-background focus-within:ring-1 focus-within:ring-ring focus-within:ring-offset-2",
          className
        )}>
        <input
          type={type}
          className="w-full p-2 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
          ref={ref}
          {...props}
        />
        <span onClick={onShow} className="pr-4 cursor-pointer">
          {icon}
        </span>
      </div>
    );
  }
);
Input.displayName = "Input";

export { Input };

[YomaAroriode]

import * as React from "react";
import { cn } from "@/lib/utils";

export interface InputProps
extends React.InputHTMLAttributes {
icon?: React.ReactNode;
iconPosition?: "left" | "right";
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, icon, iconPosition, ...props }, ref) => {
return (

{icon && iconPosition === "left" && (

{icon}

)}
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-white py-2 pl-14 pr-12 text-sm ring-offset-primary file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
ref={ref}
{...props}
/>
{icon && iconPosition === "right" && (

{icon}

)}

);
},
);

Input.displayName = "Input";

export { Input };

[YomaAroriode]

I edited the shadcn input component to include icon prop left or right, feel free to edit to your use case

[Tsandesh]

import * as React from "react"

import { cn } from "@/lib/utils"
import { LucideIcon } from "lucide-react"

export interface InputProps
extends React.InputHTMLAttributes {
icon?: LucideIcon
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (

{props.icon && (
<props.icon
size={20}
className="absolute opacity-65 left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground"
/>
)}
<input
type={type !== "abn" ? type : "number"}
onChange={props.onChange}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
props.icon && "pl-10",
className
)}
ref={ref}
min={0}
{...props}
/>

)
}
)
Input.displayName = "Input"

export { Input }

[guibzo]

Tried to make a solution using composition pattern, but couldn't get the focus state for the father div right (using Expo/Reusables).

import { cva, type VariantProps } from 'class-variance-authority'
import type { LucideProps } from 'lucide-react-native'
import * as React from 'react'
import { TextInput, View } from 'react-native'
import { cn } from '~/lib/utils'

const inputContainerVariants = cva(
  'flex flex-row items-center group web:group-focus-visible:border-4 ring-2 ring-input bg-background px-[10px] py-[7px] group web:focus-within:ring-2 web:group-focus-visible:ring-2 web:ring-offset-background',
  {
    variants: {
      radius: {
        default: 'rounded-[100px]',
        sm: 'rounded-[10px]',
      },
    },
    defaultVariants: {
      radius: 'default',
    },
  }
)

type InputContainerProps = React.ComponentPropsWithoutRef<typeof View> &
  VariantProps<typeof inputContainerVariants> & {
    children: React.ReactNode
  }

const InputContainer = React.forwardRef<React.ElementRef<typeof View>, InputContainerProps>(
  ({ children, className, radius, ...props }, ref) => {
    return (
      <View
        ref={ref}
        className={cn(inputContainerVariants({ className, radius }))}
        {...props}
      >
        {children}
      </View>
    )
  }
)

InputContainer.displayName = 'InputContainer'

type InputIconProps = { icon: React.ComponentType<LucideProps> } & LucideProps

const InputIcon = ({ icon: Icon, size = 20, ...props }: InputIconProps) => {
  return (
    <View className='p-2.5 -mb-1'>
      <Icon
        className='text-primary'
        size={size}
        {...props}
      />
    </View>
  )
}
InputIcon.displayName = 'InputIcon'

const Input = React.forwardRef<
  React.ElementRef<typeof TextInput>,
  React.ComponentPropsWithoutRef<typeof TextInput>
>(({ className, placeholderClassName, ...props }, ref) => {
  return (
    <TextInput
      ref={ref}
      className={cn(
        'web:flex h-10 native:h-12 web:w-full rounded-md px-2.5 mr-2.5  group web:py-2.5 text-base lg:text-sm group native:text-lg native:leading-[1.25] text-foreground placeholder:text-muted-foreground web:ring-offset-background file:border-0 file:bg-transparent file:font-medium web:focus-visible:outline-none web:focus-visible:ring-0',
        props.editable === false && 'opacity-50 web:cursor-not-allowed',
        className
      )}
      placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
      {...props}
    />
  )
})

Input.displayName = 'Input'

export { Input, InputContainer, InputIcon }

[joco25]

I have a simple extension of the base icon component, with support for Start icons, End icons, Password hide/reveal functionality and CapsLock active indication.
Please bear in mind, that this sample uses LucideIcons, you can modify the behavior.

`
'use client';
import * as React from 'react';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';
import { ArrowBigUpDash, EyeIcon, EyeOffIcon, LucideIcon } from 'lucide-react';

export interface InputProps
extends React.InputHTMLAttributes {
StartIcon?: LucideIcon;
EndIcon?: LucideIcon;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ StartIcon, EndIcon, className, type, ...props }, ref) => {
const [showPassword, setShowPassword] = React.useState(false);
const [capsLockActive, setCapsLockActive] = React.useState(false);

const handleKeyPress: React.KeyboardEventHandler<HTMLInputElement> = (
  event
) => {
  const capsLockOn = event.getModifierState('CapsLock');
  setCapsLockActive(capsLockOn);
};

const togglePasswordVisibility = () => setShowPassword(!showPassword);

const inputClasses = cn(
  'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
  StartIcon && 'pl-10',
  EndIcon && 'pr-10',
  type === 'password' && (!capsLockActive ? 'pr-8' : 'pr-16'),
  className
);

return (
  <div className={cn('relative', className)}>
    {StartIcon && (
      <div className='absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none'>
        <StartIcon size={20} className='text-slate-500' />
      </div>
    )}
    <input
      type={type === 'password' && showPassword ? 'text' : type}
      className={inputClasses}
      onKeyDown={handleKeyPress}
      ref={ref}
      {...props}
    />
    {EndIcon && (
      <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
        <EndIcon size={20} className='text-slate-500' />
      </div>
    )}
    {type === 'password' && (
      <div className='absolute right-0 flex items-center pr-3 -translate-y-1/2 top-1/2 gap-x-1'>
        {showPassword ? (
          <EyeOffIcon
            className='cursor-pointer'
            onClick={togglePasswordVisibility}
            size={20}
          />
        ) : (
          <EyeIcon
            className='cursor-pointer'
            onClick={togglePasswordVisibility}
            size={20}
          />
        )}
        {capsLockActive && type === 'password' && (
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <ArrowBigUpDash size={20} />
              </TooltipTrigger>
              <TooltipContent>
                <p>Caps Lock is on!</p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        )}
      </div>
    )}
  </div>
);

}
);
Input.displayName = 'Input';

export { Input };
`

[ValentinZoia]

🙌 My Solution for Input password with toggle Eye Icon using shadcn/ui and radix-ui/react-icons 👁.

import * as React from "react"

import { cn } from "@/lib/utils";
import { EyeOpenIcon, EyeClosedIcon } from "@radix-ui/react-icons";

export interface InputProps
extends React.InputHTMLAttributes {}

{/* NORMAL INPUT */}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}

  />
)

}
)

{/* PASSWORD INPUT WITH TOGGLE EYE ICON*/}
const InputPassword = React.forwardRef<HTMLInputElement, InputProps>(

({ className, type, ...props }, ref) => {
const [showPassword, setShowPassword] = React.useState(false);

const togglePasswordVisibility = () => setShowPassword(!showPassword);

const inputClasses = cn(
  "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
  type === "password",
  className
);

return (
  <div className={cn("relative", className)}>
    
    <input
      type={type === "password" && showPassword ? "text" : type}
      className={inputClasses}
      ref={ref}
      {...props}
    />
    {type === "password" && (
      <div className="absolute right-0 flex items-center pr-3 -translate-y-1/2 top-1/2 gap-x-1">
        {showPassword ? (
          <EyeClosedIcon
            className="cursor-pointer"
            onClick={togglePasswordVisibility}
            
          />
        ) : (
          <EyeOpenIcon
            className="cursor-pointer"
            onClick={togglePasswordVisibility}
            
          />
        )}
        
      </div>
    )}
  </div>
);

}
);

Input.displayName = "Input";
InputPassword.displayName = "InputPassword";

export { Input, InputPassword }

[0xHecker]

My solution with both startIcon and endIcon

const Input = React.forwardRef(({ className, type, startIcon, endIcon, onStartIconClick, onEndIconClick, ...props }, ref) => {
  const StartIcon = startIcon;
  const EndIcon = endIcon;
  return (
    <div className="w-full relative flex items-center">
      {startIcon && <button
        className="absolute left-3 text-center transition-all disabled:pointer-events-none disabled:opacity-50"
        type="button"
        onClick={onStartIconClick}
      >
        <StartIcon className={"w-4 h-4 text-foreground-faded"} />
      </button>
      }
      <input
        type={type}
        className={cn("w-full py-2 rounded-sm bg-background placeholder:text-foreground-faded border border-border-faded transition duration-300 ease focus:outline-none focus:border-border-primary",
          startIcon && 'pl-9',
          endIcon && 'pr-9',
          className
        )}
        ref={ref}
        {...props }
     />
      {endIcon && <button
        className="absolute right-3 text-center transition-all disabled:pointer-events-none disabled:opacity-50"
        type="button"
        onClick={onEndIconClick}
      >
          <EndIcon className="w-4 h-4 text-foreground" />
        </button>
      }
  </div>
  );
})
Input.displayName = "Input"

export { Input }

[IndyVC]

Hi all, I've created a PR to make it easier to use icons
#5407

[adekastanley]

A bit late but heres how i did it
will paste the full component
also note that in my implementation I'm passing in a react icon as a prop with the name icon so it looks like
** <Input
icon={}
id="cPassword"
placeholder="Confirm Password"
type="password"
required
/>**
**
`import * as React from "react";

import { cn } from "@/lib/utils";

export interface InputProps
extends React.InputHTMLAttributes {
icon?: React.ReactNode; // Add icon prop type here
}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, icon, ...props }, ref) => {
return (

{icon && (

{icon}

)}{" "}
{/* Render icon if provided */}
<input
type={type}
className={cn(
flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${icon && "pl-8"},
className,
)}
ref={ref}
{...props}
/>

);
},
);
Input.displayName = "Input";

export { Input };
`
**

[sirius-red]

The most flexible solution I've found:

import * as React from 'react'

import { cn } from '~/lib/utils'

type IconProps = React.SVGProps<SVGSVGElement> & { children?: never }

type IconPropsWithBehavior<T extends IconProps> = T & { behavior: 'append' | 'prepend' }

type IconComponent<T extends IconProps = IconProps> = React.ComponentType<T>

export type InputProps<T extends IconComponent = IconComponent> = React.InputHTMLAttributes<HTMLInputElement> & {
    icon?: T
    iconProps: T extends IconComponent<infer P> ? IconPropsWithBehavior<P> : never
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
    ({ className, type, icon, iconProps: { behavior: iconBehavior, className: iconClassName, ...iconProps }, ...props }, ref) => {
        const Icon = icon

        return (
            <div
                className={cn(
                    'flex items-center justify-center m-0 p-0 rounded-md border border-input bg-transparent px-3 py-0 text-sm shadow-sm transition-colors focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
                    className
                )}
            >
                {Icon && type !== 'file' && iconBehavior === 'prepend' && (
                    <Icon className={cn('w-4 h-4 mr-3 text-muted-foreground', iconClassName)} {...iconProps} />
                )}
                <input
                    type={type}
                    className={cn(
                        'flex items-center justify-center h-9 w-full bg-transparent placeholder:text-muted-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
                        type !== 'file' ? 'py-1' : 'py-1.5',
                        className
                    )}
                    ref={ref}
                    {...props}
                />
                {Icon && type !== 'file' && iconBehavior === 'append' && (
                    <Icon className={cn('w-4 h-4 ml-3 text-muted-foreground', iconClassName)} {...iconProps} />
                )}
            </div>
        )
    }
)
Input.displayName = 'Input'

export { Input }

Usage:

import { Input } from '~/components/ui/input'
import { MagnifyingGlassIcon as SearchIcon } from '@radix-ui/react-icons'

<Input type='search' icon={SearchIcon} iconProps={{ behavior: 'prepend' }} placeholder='Search...' />

Preview:

[Dastari]

This was exactly what I was looking for. Nice work.

[KanoDekouBillyBrown]

works perfectly fine thanks ,
`

Type 'FC<SVGProps<SVGSVGElement>>' is not assignable to type 'IconComponent<IconProps> | undefined'.
Type 'FunctionComponent<SVGProps<SVGSVGElement>>' is not assignable to type 'FunctionComponent<IconProps>'.
Types of property 'propTypes' are incompatible.
Type 'WeakValidationMap<SVGProps<SVGSVGElement>> | undefined' is not assignable to type 'WeakValidationMap<IconProps> | undefined'.
Type 'WeakValidationMap<SVGProps<SVGSVGElement>>' is not assignable to type 'WeakValidationMap<IconProps>'.
Types of property 'children' are incompatible.
Type 'Validator<ReactNode> | undefined' is not assignable to type 'Validator<null | undefined> | undefined'.
Type 'Validator<ReactNode>' is not assignable to type 'Validator<null | undefined>'.
Type 'ReactNode' is not assignable to type 'null | undefined'.
Type 'string' is not assignable to type 'null | undefined'.ts(2322)

input.tsx(15, 5): The expected type comes from property 'icon' which is declared here on type 'IntrinsicAttributes & InputHTMLAttributes<HTMLInputElement> & { icon?: IconComponent<IconProps> | undefined; iconProps: IconPropsWithBehavior<...>; onIconClick?: (() => void) | undefined; } & RefAttributes<...>'

⚠ Error (TS2322)  | 

Type 

FC<SVGProps<SVGSVGElement>>

 is not assignable to type 

IconComponent<IconProps> | undefined

 .

	Type  FunctionComponent<SVGProps>  is not assignable to type  FunctionComponent  .

(property) icon?: IconComponent<IconProps> | undefined

`

I have this error with custom svg's as icons
@sirius-red

[baswenneker]

This is the best implementation, thanks for sharing @sirius-red 🙏

@KanoDekouBillyBrown I had the same issue with lucide-react icons. This might help you out, check the line where I added the LucideProps to IconProps.

import * as React from "react";
import { cn } from "~/lib/utils";
import type { LucideProps } from "lucide-react";

type IconProps =
  | LucideProps
  | (React.SVGProps<SVGSVGElement> & {
      children?: never;
    });
type IconPropsWithBehavior<T extends IconProps> = T & {
  behavior: "append" | "prepend";
};
type IconComponent<T extends IconProps = IconProps> = React.ComponentType<T>;

type InputProps<T extends IconComponent = IconComponent> =
  React.InputHTMLAttributes<HTMLInputElement> & {
    icon?: T;

    // iconProps?: React.ComponentProps<T>;
    iconProps: T extends IconComponent<infer P>
      ? IconPropsWithBehavior<P>
      : never;
  };

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  (
    {
      className,
      type,
      icon,
      iconProps: {
        behavior: iconBehavior,
        className: iconClassName,
        ...iconProps
      },
      ...props
    },
    ref,
  ) => {
    const Icon = icon;

    return (
      <div
        className={cn(
          "m-0 flex items-center justify-center rounded-md border border-input bg-transparent p-0 px-3 py-0 text-sm shadow-sm transition-colors focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
          className,
        )}
      >
        {Icon && type !== "file" && iconBehavior === "prepend" && (
          <Icon
            className={cn("mr-3 h-4 w-4 text-muted-foreground", iconClassName)}
            {...iconProps}
          />
        )}
        <input
          type={type}
          className={cn(
            "flex h-9 w-full items-center justify-center bg-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
            type !== "file" ? "py-1" : "py-1.5",
            className,
          )}
          ref={ref}
          {...props}
        />
        {Icon && type !== "file" && iconBehavior === "append" && (
          <Icon
            className={cn("ml-3 h-4 w-4 text-muted-foreground", iconClassName)}
            {...iconProps}
          />
        )}
      </div>
    );
  },
);
Input.displayName = "Input";

export { Input };

[KanoDekouBillyBrown]

@baswenneker thanks it worked for me ,
I also use custom svg's like this

import React from "react";

const SearchEyeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      {...props}
    >
      <path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM12.1779 7.17624C11.4834 7.48982 11 8.18846 11 9C11 10.1046 11.8954 11 13 11C13.8115 11 14.5102 10.5166 14.8238 9.82212C14.9383 10.1945 15 10.59 15 11C15 13.2091 13.2091 15 11 15C8.79086 15 7 13.2091 7 11C7 8.79086 8.79086 7 11 7C11.41 7 11.8055 7.06167 12.1779 7.17624Z" />
    </svg>
  );
};

export default SearchEyeIcon;

it was throwing errors i made it work by using your approach and added

type IconProps =
  | React.SVGProps<SVGSVGElement>
  | LucideProps
  | (React.SVGProps<SVGSVGElement> & { children?: never });

[sirius-red]

Thanks guys, glad to have helped! ✌️

[ystrdy]

Below is my proposal.

import * as React from "react"
import { cn } from "@/utils/utils"
import { ArrowBigUpDash, Eye, EyeClosed, Search } from "lucide-react";
import { useKeyPress } from "ahooks";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";

type InputProps = React.PropsWithChildren<React.ComponentProps<"input">> & {
    icon?: React.ReactNode
}

const Input = React.forwardRef < HTMLInputElement, InputProps> (
    ({ children, icon, className, type, ...props }, ref) => {
        const classes = cn(
            'flex h-10 w-full gap-x-2 rounded-md border border-input bg-background px-3 py-2 text-base has-[:focus-visible]:outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 md:text-sm',
            className
        );
        return (
            <div className={classes}>
                {icon}
                <input
                    type={type}
                    className="flex-1 h-full bg-background outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed"
                    ref={ref}
                    {...props}
                />
                {children}
            </div>
        )
    }
)
Input.displayName = "Input"

const InputPassword = React.forwardRef < HTMLInputElement, Omit<React.ComponentProps<'input' >, 'type' >> (
    (props, ref) => {
        const [showPassword, setShowPassword] = React.useState(false);
        const togglePasswordVisibility = () => setShowPassword(!showPassword);
        const [capsLockActive, setCapsLockActive] = React.useState(false);
        useKeyPress(
            () => true,
            e => {
                if (e.getModifierState) {
                    setCapsLockActive(e.getModifierState('CapsLock'))
                }
            }
        );
        return (
            <Input ref={ref} {...props} type={showPassword ? "text" : 'password'}>
                <div className="flex items-center gap-x-1 self-center">
                    {showPassword ? (
                        <EyeClosed
                            className="cursor-pointer"
                            onClick={togglePasswordVisibility}
                            size={20}
                        />
                    ) : (
                        <Eye
                            className="cursor-pointer"
                            onClick={togglePasswordVisibility}
                            size={20}
                        />
                    )}
                    {capsLockActive && (
                        <TooltipProvider>
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <ArrowBigUpDash size={20} />
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>Caps Lock is on!</p>
                                </TooltipContent>
                            </Tooltip>
                        </TooltipProvider>
                    )}
                </div>
            </Input>
        );
    }
);
InputPassword.displayName = 'InputPassword';

const InputSearch = React.forwardRef < HTMLInputElement, React.ComponentProps< 'input' >> (
    (props, ref) => {
        return <Input ref={ref} {...props} icon={<Search size={20} className="self-center" />} />;
    }
);

export { Input, InputPassword, InputSearch }