Docs
input

input

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

Installation

npx duck-ui@latest add input
npx duck-ui@latest add input

Usage

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

Examples

Default

File

Disabled

With Label

With Button

Form

This is your public display name.

API Reference

Input

  • type (string, optional): The HTML input type (e.g., 'text', 'password', 'email').
  • ...props (React.HTMLProps<HTMLInputElement>): Other native input props like placeholder, disabled, value, onChange, etc.

Behavior:

  • Renders a fully styled HTML <input> element with focus, disabled, and placeholder styles.
  • Supports utility class merging using the cn helper.
  • Designed for flexible use in forms or standalone input fields.
Hover CardInput OTP