Input

The Input component is a flexible and feature-rich form control that supports various states, icons, validation, and custom styling. It's designed to be accessible and user-friendly while maintaining a consistent look and feel.

Import

import { Input } from 'h2o-library';

Basic Usage

Simple Input

<Input 
  label="Username"
  placeholder="Enter your username"
/>

Input with Value

<Input 
  label="Controlled Input"
  value="Hello World"
  onChange={(e) => console.log(e.target.value)}
/>

Input Sizes

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

Input with Icons

<Input 
  label="Left Icon"
  leftIcon="search"
  placeholder="Search..."
/>
<Input 
  label="Right Icon"
  rightIcon="info"
  placeholder="With right icon..."
/>

Password Input

<Input 
  label="Password"
  type="password"
  placeholder="Enter password..."
/>

Input with Tooltip

<Input 
  label="With Tooltip"
  tooltip="This is a helpful tooltip"
  placeholder="Hover over the info icon..."
/>

Interactive Examples

For interactive examples including all features and states, check out our example component:

Props

Prop	Type	Default	Description
label	string	-	The label text for the input
size	"sm" | "md" | "lg"	"md"	The size of the input
leftIcon	IconType	-	Icon to display on the left side
rightIcon	IconType	-	Icon to display on the right side
onRightIconClick	() => void	-	Callback when right icon is clicked
showClear	boolean	false	Whether to show a clear button
note	string	-	Helper text below the input
error	string	-	Error message below the input
containerClassName	string	-	Additional CSS classes for the container
tooltip	string	-	Tooltip text for the info icon
tooltipPosition	TooltipPosition	"top"	Position of the tooltip

Plus all standard HTML input attributes except size.

Design Considerations

• Clear visual hierarchy with labels and helper text
• Consistent spacing and alignment
• Visual feedback for different states (focus, error, disabled)
• Support for both controlled and uncontrolled usage
• Flexible icon placement and interaction
• Password visibility toggle
• Clear button for easy value reset
• Tooltip support for additional information
• Custom styling options for both container and input

Accessibility

• Proper label association with inputs
• Clear focus states
• Error messages are properly announced
• Helper text provides additional context
• Icons are decorative and don't interfere with screen readers
• Password visibility toggle is keyboard accessible
• Clear button is properly labeled
• Tooltips are accessible via keyboard
• ARIA attributes are automatically handled
• Screen readers announce the current state and any errors