Input

Text input with OKLCH-tuned focus ring and surface hierarchy.

Code

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

export default function Example() {
  return <Input placeholder="Email" />
}

Installation

$npx particleui-cli add input

Usage

TSX

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

export default function Example() {
  return <Input placeholder="Email" />
}

Examples

Types

The type prop maps to the native HTML input type.

TSX

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

export default function Example() {
  return (
    <div className="space-y-3 max-w-sm">
      <Input type="text" placeholder="Text" />
      <Input type="email" placeholder="Email" />
      <Input type="password" placeholder="Password" />
      <Input type="number" placeholder="Number" />
    </div>
  )
}

Disabled state

TSX

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

export default function Example() {
  return <Input disabled placeholder="Disabled input" />
}

Props

Prop	Type	Default	Required
type	string	`"text"`	no
placeholder	string	—	no
disabled	boolean	`false`	no

Details

Source filecomponents/ui/input.tsx

Typeui

Categoriesforms, core

npm dependencies

Registry deps

Claude skill—