import * as React from "react"
import type { LucideIcon } from "lucide-react"

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

type InputProps = React.ComponentProps<"input"> & {
  iconStart?: LucideIcon
  iconEnd?: LucideIcon
}

function Input({ className, type, iconStart: IconStart, iconEnd: IconEnd, ...props }: InputProps) {
  const hasIconStart = !!IconStart
  const hasIconEnd = !!IconEnd

  const baseInputClasses = "file:text-foreground placeholder:text-subtle-foreground selection:bg-accent selection:text-accent-foreground border-border h-8 w-full min-w-0 rounded-md border bg-transparent px-3 text-base md:text-sm shadow-xs transition-[color,box-shadow,border-color] duration-150 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70"
  const focusClasses = "focus-visible:border-accent focus-visible:ring-ring-accent focus-visible:ring-1"
  const invalidClasses = "aria-invalid:ring-ring-destructive aria-invalid:border-destructive"

  // Without icons, apply className directly to input
  if (!hasIconStart && !hasIconEnd) {
    return (
      <input
        type={type}
        data-slot="input"
        className={cn(baseInputClasses, focusClasses, invalidClasses, className)}
        {...props}
      />
    )
  }

  // With icons, className goes on wrapper, input gets icon padding
  return (
    <div className={cn("relative", className)}>
      {IconStart && (
        <IconStart aria-hidden="true" className="absolute left-3 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground pointer-events-none z-10" />
      )}
      <input
        type={type}
        data-slot="input"
        className={cn(
          baseInputClasses,
          focusClasses,
          invalidClasses,
          hasIconStart && "pl-9",
          hasIconEnd && "pr-9"
        )}
        {...props}
      />
      {IconEnd && (
        <IconEnd aria-hidden="true" className="absolute right-3 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground pointer-events-none z-10" />
      )}
    </div>
  )
}

export { Input }
export type { InputProps }
Search documentation

Input

Installation

Usage

Examples

Default

With Icons
