Search Input
Search inputs allow users to enter search queries. Material Design 3 provides search bars with various layouts and behaviors for different use cases.
Search Bar
The standard search bar has a rounded container with a leading search icon and optional trailing icons.
Search Bar with Leading Avatar
Search bars can include a leading avatar for personalization or account indication.
JD
Outlined Search Bar
An alternative search bar with an outlined border instead of a filled background.
Search with Suggestions
Search bars can expand to show search suggestions or recent searches.
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| containerColor | color | #E6E0E9 | #F6ECDA | #F2E8DD |
| borderRadius | string | 28px | 9999px | 9999px |
| iconColor | color | #49454F | #666666 | #4A4A4A |
| focusIconColor | color | #6750A4 | #038012 | #1A5129 |
| placeholderColor | color | #49454F | #999999 | #8A8A8A |
| textColor | color | #1D1B20 | #038012 | #1A1A1A |
| height | string | 56px | 48px | 48px |
| padding | string | 8px 16px | 8px 16px | 8px 16px |
| fontSize | string | 16px | 16px | 16px |
| suggestionShadow | string | 0 4px 8px rgba(0,0,0,0.15) | 0 4px 6px rgba(0,0,0,0.1) | 0 4px 6px rgba(0,0,0,0.1) |
Usage Guidelines
- Use a search bar prominently when search is a primary action
- Include a clear icon when there is text in the search field
- Show recent searches or suggestions to help users find content faster
- Use the outlined variant when the search is secondary or in a toolbar
- Ensure the search is accessible with proper ARIA labels