Search Input
Search input component with Genentech blue primary button, combining Form input styles with Button component in three sizes for consistent search experiences
Size Variants
Small (28px height)
Internal search icon (left), clear button appears when typing, external Search button
Medium (36px height) - Default
Standard search with internal search icon, automatic clear button when typing, and external button
Large (48px height)
Prominent search with internal search icon, clear functionality, and external button for hero sections
Button Text Customization
Custom Button Text
External button text can be customized for different search contexts while maintaining internal search icon and clear functionality
Interactive Examples
Live Search with Results
Demonstrates controlled value, search callback, and loading states
Uncontrolled with Enter Key
Uncontrolled input that triggers search on Enter key or button click
Error State
Error State - All Sizes
Error state shows red input border, red search icon, red clear button (when text present), and red warning button
Error State Variations
Error state works with empty inputs, inputs with values, and even during loading states
Disabled State
Disabled State - All Sizes
All sizes support disabled state with consistent styling