Logo
DocsInput

Input

Displays a form input field or a component that looks like an input field.

Implementation

1

Copy and paste the following code into your project.

import * as React from "react"

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

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base 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 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }
2

Update the import paths to match your project setup.

Usage

import { Input } from "@/components/ui/input"

Examples

Default

With Label

With Button

With Icon

API Reference

Input

The Input component is built on top of the native input element.

Input Properties

PropertyTypeDefaultDescription
typestring"text"The type of the input element.
placeholderstring-The placeholder text for the input.
disabledbooleanfalseWhether the input is disabled.