Input

v1.0.0

Form

A flexible input component with various styles and validation states.

Dependencies

@radix-ui/react-slot

Installation

Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/input.json

Manual Installation

// Copy the input component from the registry

Props

Component properties and their types

type

string

default: 'text'

The input type (text, email, password, etc.)

placeholder

string

default: undefined

Placeholder text for the input

disabled

boolean

default: false

Whether the input is disabled

error

boolean

default: false

Whether the input has an error state

Examples

2 different usage examples

Basic Input

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

export function InputDemo() {
  return (
    <div className="space-y-4">
      <Input placeholder="Enter your name" />
      <Input type="email" placeholder="Enter your email" />
      <Input type="password" placeholder="Enter your password" />
      <Input placeholder="Disabled input" disabled />
    </div>
  )
}

Registry

View the component registry file

View Registry

Live Preview

Interactive

2 examples available