Form Elements
Search
Search component allows users to quickly find relevant information within an application. It enhances navigation, improves content discoverability and supports text based, voice or filter-assisted search functionality.
Examples
Label
Label
Label
AccessibilityWCAG 2.1 Level AA Compliant
Features4 checks
- Keyboard accessible, Tab to focus, Enter to submit
- Screen reader announces field label and role
- Focus indicator: 3px brand-purple ring visible on focus
- Suggestions panel announced via aria-live region
When to use this component
✓Do's
- •Users need to find content across a large dataset or site
- •The primary task involves locating specific information quickly
- •Auto-suggestions would help users refine their query
- •Government portals with many services, forms, or documents
✕Don'ts
- •Choose a Select or Combobox for predefined options.
- •Display options directly when the list is short.
- •Use a filter panel for filtering large datasets with multiple criteria.
Do's and Don'ts
✓ Do's
Search services
Provide a clear label and helpful placeholder text that describes what can be searched.
✗ Don'ts
Don't use a search field without a label or placeholder, users won't know what to search for.