@darksnow-ui/input

A flexible and customizable Input component for React applications.

Installation

pnpm add @darksnow-ui/input

Usage

import { Input } from "@darksnow-ui/input"
import "@darksnow-ui/input/styles.css"

function App() {
  return <Input placeholder="Enter your email" variant="default" size="md" />
}

Props

| Prop | Type | Default | Description | | --------- | ----------------------------------- | ----------- | --------------------------------------- | | variant | 'default' \| 'error' \| 'success' | 'default' | Visual variant of the input | | size | 'sm' \| 'md' \| 'lg' | 'md' | Size of the input | | leftIcon | ReactNode | - | Icon to display on the left side | | rightIcon | ReactNode | - | Icon to display on the right side | | isLoading | boolean | false | Whether the input is in a loading state | | focusRing | boolean | true | Whether to show focus ring | | ...props | InputHTMLAttributes | - | All native input attributes |

Examples

Basic Usage

<Input type="email" placeholder="Email" />

With Label

import { Label } from "@darksnow-ui/label"

<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>

With Icons

import { Input } from '@darksnow-ui/input'
import { Search, Mail } from 'lucide-react'

// Left icon
<Input
  leftIcon={<Search size={16} />}
  placeholder="Search..."
/>

// Right icon
<Input
  rightIcon={<Mail size={16} />}
  placeholder="Email"
  type="email"
/>

Variants

// Default
<Input variant="default" placeholder="Default input" />

// Error
<Input variant="error" placeholder="Error state" />

// Success
<Input variant="success" placeholder="Success state" />

Sizes

<Input size="sm" placeholder="Small input" />
<Input size="md" placeholder="Medium input" />
<Input size="lg" placeholder="Large input" />

States

// Disabled
<Input disabled type="email" placeholder="Email" />

// Loading
<Input isLoading placeholder="Loading..." />

// Without focus ring
<Input focusRing={false} placeholder="No focus ring" />

Input Types

<div className="space-y-4">
  <div>
    <Label htmlFor="text">Text</Label>
    <Input id="text" type="text" placeholder="Enter text" />
  </div>
  
  <div>
    <Label htmlFor="password">Password</Label>
    <Input id="password" type="password" placeholder="Enter password" />
  </div>
  
  <div>
    <Label htmlFor="number">Number</Label>
    <Input id="number" type="number" placeholder="Enter number" />
  </div>
  
  <div>
    <Label htmlFor="date">Date</Label>
    <Input id="date" type="date" />
  </div>
  
  <div>
    <Label htmlFor="time">Time</Label>
    <Input id="time" type="time" />
  </div>
  
  <div>
    <Label htmlFor="file">File</Label>
    <Input id="file" type="file" />
  </div>
</div>

With Button

import { Button } from "@darksnow-ui/button"

<div className="flex w-full max-w-sm items-center space-x-2">
  <Input type="email" placeholder="Email" />
  <Button type="submit">Subscribe</Button>
</div>

Form Example

import { Button } from "@darksnow-ui/button"
import { Label } from "@darksnow-ui/label"

<form className="space-y-4 max-w-sm">
  <div>
    <Label htmlFor="name">Full Name</Label>
    <Input 
      id="name" 
      type="text" 
      placeholder="John Doe" 
      required 
    />
  </div>
  
  <div>
    <Label htmlFor="email">Email</Label>
    <Input 
      id="email" 
      type="email" 
      placeholder="[email protected]" 
      required 
    />
  </div>
  
  <div>
    <Label htmlFor="phone">Phone</Label>
    <Input 
      id="phone" 
      type="tel" 
      placeholder="+1 (555) 123-4567"
      leftIcon={<Phone size={16} />}
    />
  </div>
  
  <Button type="submit" className="w-full">
    Submit
  </Button>
</form>

Search Input

import { Search, X } from "lucide-react"

<div className="relative">
  <Input
    type="search"
    placeholder="Search..."
    leftIcon={<Search size={16} />}
    rightIcon={<X size={16} />}
    className="pr-10"
  />
</div>

CSS Variables

You can customize the appearance using CSS variables:

:root {
  --darksnow-input-border: #e5e7eb;
  --darksnow-input-bg: #ffffff;
  --darksnow-input-color: #111827;
  --darksnow-input-border-hover: #d1d5db;
  --darksnow-input-border-focus: #3b82f6;
  --darksnow-input-focus-ring: rgba(59, 130, 246, 0.15);
  --darksnow-input-placeholder: #9ca3af;
  --darksnow-input-icon-color: #6b7280;
  --darksnow-input-radius: 0.375rem;

  /* Error variant */
  --darksnow-input-error-border: #ef4444;
  --darksnow-input-error-border-hover: #dc2626;
  --darksnow-input-error-focus-ring: rgba(239, 68, 68, 0.15);

  /* Success variant */
  --darksnow-input-success-border: #10b981;
  --darksnow-input-success-border-hover: #059669;
  --darksnow-input-success-focus-ring: rgba(16, 185, 129, 0.15);
}