Input Fields

Example of text input styles using the Input component. Inputs include hover, focus, and disabled states with proper accessibility support.

Text Input States

Default Input

This is the standard input. Hover and focus states are active.

Disabled Input

Input with the disabled attribute.

Input with Value

Input with pre-filled content to show the filled state.

Email Input

Password Input

Number Input

Search Input

The Input component (@/components/ui/input.tsx) handles its own styling with proper state management.

Hover state: Changes border color for better interactivity feedback.

Focus state: Changes border color and adds a focus ring for accessibility.

Disabled state: Reduced opacity with different background and border styling.

All input types inherit the same base styling while maintaining their native browser functionality and validation.

•Error state variants with validation styling
•Success state indicators for validated inputs
•Additional form elements: textareas, select dropdowns, checkboxes, radio buttons
•Input groups with icons and action buttons
•Dark theme variants and theme switching capabilities