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

[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 };

[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:

[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 };