⌘ K
  • Design Principles
  • Design Framework
  • UX Laws
  • Colours
  • Typography
  • Layout Grids
  • Spacing & Radius
  • Shadow & Blur
Product Design Process
Accessibility Guideline
Content Voice
Marketing & Collaterals
  • Accordion
  • App Bar
  • Avatar
  • Badge
  • Button
  • Breadcrumb
  • Bottom Navigation
  • Carousel
  • Cards
  • Checkbox
  • Chip
  • Date Picker
  • Dropdown
  • Dialog
  • Divider
  • Floating Action Button
  • Footer
  • Header
  • Link
  • Loader
  • Menu
  • Pagination
  • Popover
  • Progress Bar
  • Radio Button
  • Search
  • Sidebar
  • Slider
  • Skeleton
  • Statistic
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag
  • Text Field
  • Timeline
  • Toast Message
  • Tooltip
  • Upload
  • Logos
  • System Icons
  • Visual Icons
  • Illustrations
  • Images
  • Tones
Templates
v 1.0
  • About Helix
  • For Designers
  • For Developers
  • Components
Search

Search

The search bar enhances user experience by enabling quick and efficient access to content or features.

Usage

  • Allow users to quickly find specific content or items within the application.
  • Navigation aid for accessing specific content or features.
  • Facilitating content discovery and exploration.

Anatomy

The search bar features a search icon alongside search text within a container, with a voice icon available for voice-assisted search (optional).

Search Anatomy

States

Search have default, typing and typed states.

Default

Typing

Typed

Sizes

Search are available in extra small , small, medium and large sizes.

Extra Small

Small

Medium

Large

Specifications

Structure and spacing measurements for search.

Search Specifications

Live Demo

The Search is demonstrated in a live environment in this demo.

Storybook

Gain access to the component library by clicking here. (For developers)

Radio Button
Sidebar

Helix - HDFC Life 2025