Expandable

The Expandable component provides a flexible way to create expandable search inputs with smooth transitions and custom styling options. It's perfect for creating collapsible search bars that expand when needed.

Import

import { ExpandableSearch } from 'h2o-library';

Basic Usage

Basic Expandable Search

<ExpandableSearch
  onSearch={(value) => {
    console.log("Search value:", value);
  }}
  placeholder="Search..."
/>

Expandable Search with Custom Placeholder

<ExpandableSearch
  onSearch={handleSearch}
  placeholder="Search products..."
/>

Expandable Search with Custom Styling

<ExpandableSearch
  onSearch={handleSearch}
  placeholder="Search..."
  className="bg-gray-100 rounded-lg"
/>

Interactive Examples

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

Props

Prop	Type	Default	Description
onSearch	(value: string) => void	-	Function called when the search value changes
placeholder	string	"Search..."	Placeholder text for the search input
className	string	-	Additional CSS classes for custom styling

Design Considerations

• Clear visual hierarchy
• Smooth transitions
• Proper spacing
• Custom styling options
• Responsive design
• Clear visual feedback
• Proper touch targets
• Input alignment
• Support for different contexts
• Proper spacing
• Consistent styling
• Icon integration
• Animation timing
• State management

Accessibility

• Proper ARIA attributes
• Screen reader support
• Clear visual indicators
• Proper contrast ratios
• Support for reduced motion
• Touch target sizes
• Keyboard navigation
• Focus management
• Color contrast
• Text alternatives
• State announcements
• Error handling
• Focus restoration
• Touch device support
• Screen reader announcements