`SearchInput` is a specialized input component designed for search functionality with built-in search icon and optional clear button.

Features:

- Search icon prefix for visual identification - Optional clear button that appears when text is entered - Support for different sizes and variants - Built on top of the core TextField component - Dark mode support - Disabled state styling

Usage Guidelines:

- Use for search functionality within applications - Provide clear placeholder text to indicate searchable content - Handle the onChange callback to process search queries - Consider debouncing search requests for performance - Place in navigation bars, toolbars, or filter sections - Use `clearable={false}` to hide the clear button when not needed

Accessibility:

- Includes proper ARIA labels for the search and clear functions - Maintains keyboard navigation support - Provides visual indication of focus states - Clear button has tooltip for screen reader support - Supports standard input accessibility patterns Basic: Demonstrates the default SearchInput with standard styling.

This example shows the fundamental implementation with controlled input handling. The component displays a search icon and automatically shows a clear button when text is entered.

Size: Demonstrates the SearchInput with larger sizing.

The "large" size provides increased visibility and touch target size, making it more suitable for:

- Primary search interfaces - Touch-optimized interfaces - Applications with emphasis on search functionality

Disabled: Shows the SearchInput in its disabled state.

The disabled state visually indicates that the search functionality is currently unavailable. Use this state when:

- Search is not applicable in the current context - The user doesn't have permission to search - Search functionality is temporarily unavailable

NotClearable: Demonstrates SearchInput without the clear button.

Setting `clearable={false}` hides the clear button even when there is text. This is useful when:

- You want a simpler UI without the clear action - The search is meant to be persistent - You're implementing custom clearing logic elsewhere - The use case doesn't require quick clearing

Variants: Demonstrates different visual variants of the numeric input component.

- default: Follows the page theme dynamically (light/dark mode) - light: Fixed light appearance regardless of theme - dark: Fixed dark appearance regardless of theme - reset: Removes variant styling, no variant settings applied