Input

Overview

The Input component provides a comprehensive input system for creating form fields throughout your application. It's designed to handle various input types with multiple variants, states, and styling options while maintaining accessibility and consistent design patterns.

Usage

import { Input } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <div>
      <Input placeholder="Enter text..." />
      <Input variant="success" placeholder="Success state" />
      <Input variant="error" placeholder="Error state" />
      <Input disabled placeholder="Disabled input" />
    </div>
  );
}

Examples

Default Variant

Standard input with default styling and behavior.

1

<Input placeholder="All we have to decide is what to do with the time that is given us" />

Success Variant

Input with success styling for positive validation states.

1
2
3
4

<Input
  placeholder="Not all those who wander are lost"
  variant="success"
/>

Warning Variant

Input with warning styling for cautionary states.

1
2
3
4

<Input
  placeholder="It's a dangerous business, going out your door"
  variant="warning"
/>

Error Variant

Input with error styling for validation errors.

1
2
3
4

<Input
  placeholder="One Ring to rule them all, One Ring to find them"
  variant="error"
/>

Disabled Variant

Input in disabled state for unavailable interactions.

1
2
3
4

<Input
  disabled
  placeholder="Even the smallest person can change the course of the future"
/>

With Default Value

Input with a pre-filled default value.

1
2
3
4

<Input
  defaultValue="Speak friend and enter"
  placeholder="The password is mellon"
/>

With Password Toggle

Input with password visibility toggle functionality.

1
2
3
4
5

<Input
  placeholder="Speak friend and enter"
  rightIcon={<button className="focus:outline-none" onClick={onClick} type="button"><EyeOff className="h-4 w-4" /></button>}
  type="password"
/>

With Both Icons

Input with both left and right icons for enhanced functionality.

1
2
3
4
5

<Input
  leftIcon={<m className="h-4 w-4" />}
  placeholder="Search in emails"
  rightIcon={<m className="h-4 w-4" />}
/>

Features

• Multiple Variants: Different visual styles (default, success, warning, error)
• Interactive States: Hover, focus, and disabled states
• Icon Support: Left and right icon positioning
• Password Toggle: Built-in password visibility toggle
• Accessibility: Full accessibility support with proper ARIA attributes
• Responsive Design: Adapts to different screen sizes
• Dark Mode Support: Consistent appearance in light and dark themes
• Customizable: Extensive styling options through className prop

Props

The component also accepts all standard HTML input element props.

Variants

Default

• Standard input styling with neutral colors
• Use for most form inputs
• Balanced visual weight

Success

• Green color scheme for positive states
• Use for validated or successful inputs
• Encourages positive user feedback

Warning

• Yellow/orange color scheme for cautionary states
• Use for inputs that need attention
• Indicates potential issues

Error

• Red color scheme for error states
• Use for validation errors or failed inputs
• Clearly indicates problems

Structure

The Input component is composed of:

1. Input Container - Main wrapper with styling and positioning
2. Left Icon - Optional icon on the left side
3. Input Element - The actual input field
4. Right Icon - Optional icon on the right side
5. Password Toggle - Optional password visibility toggle

Styling

The component includes default styling with:

• Consistent padding and border radius
• Color-coded variants for semantic meaning
• Smooth transitions for state changes
• Dark mode support with appropriate color schemes
• Focus states for accessibility
• Customizable through className prop

Custom Styling

You can customize the appearance using the className prop:

<Input
  placeholder="Custom styled input"
  className="custom-input-class"
  variant="success"
/>

Accessibility

The Input component is built with accessibility in mind:

• Semantic HTML: Uses proper input elements with appropriate attributes
• ARIA Attributes: Proper ARIA labels and descriptions for screen readers
• Keyboard Navigation: Full keyboard support including Tab navigation
• Focus Management: Clear focus indicators and logical tab order
• Screen Reader Support: Announces input states and validation appropriately
• High Contrast: Maintains proper contrast ratios across all variants