Input

import { Input } from "@raydenui/ui";
import type { InputProps, InputSize } from "@raydenui/ui";

<Input placeholder="Enter your name" />

<Input label="Email" placeholder="you@example.com" />

<Input label="Password" type="password" helperText="Must be at least 8 characters" />

<Input size="xs" placeholder="Extra small" />
<Input size="sm" placeholder="Small (default)" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />

// Success
<Input
  label="Email"
  success="Email is available"
  defaultValue="user@example.com"
/>
 
// Error
<Input
  label="Email"
  error="Please enter a valid email"
  defaultValue="invalid-email"
/>

// Leading icon
<Input
  leadingIcon="search"
  placeholder="Search..."
/>
 
// Trailing icon
<Input
  trailingIcon="x"
  placeholder="Input with trailing icon"
/>
 
// Both icons
<Input
  leadingIcon="mail"
  trailingIcon="check"
  placeholder="Email"
/>

<Input addonRight=".com" placeholder="domain" />

// Leading addon (e.g., dropdown)
<Input
  leadingAddon={<span>https://</span>}
  placeholder="example.com"
/>
 
// Trailing addon (e.g., button)
<Input
  trailingAddon={<Button size="sm">Search</Button>}
  placeholder="Search..."
/>
 
// Both addons
<Input
  leadingAddon={<span>$</span>}
  trailingAddon={<span>USD</span>}
  placeholder="0.00"
/>

// Read-only
<Input label="ID" value="USR-12345" readOnly />
 
// Disabled
<Input label="Email" placeholder="Enter email" disabled />