Skip to main contentCarbon Design System

Search

Color

ElementPropertyColor token
Fieldbackground-color$field *
border-bottom$border-strong *
Label text (fluid)text-color$text-secondary
Placeholder texttext-color$text-placeholder
Search iconfill$icon-secondary

* Denotes a contextual color token that will change values based on the layer it is placed on.

Example of search

Example of search

Interactive colors

StateElementPropertyColor token
FocusFieldborder$focus
FilledField texttext-color$text-primary
Close iconfill$icon-primary
DisabledField texttext-color$text-dsiabled
Label text (fluid)text-color$text-disabled
Search iconfill$icon-disabled
Field (fluid)border-bottom$border-subtle *
Examples of focus, filled, and disabled search states

Typography

Search text should be set in sentence case, with only the first letter of the first word capitalized.

ElementFont-size (px/rem)Font-weightType token
Field text14 / 0.875Regular / 400$body-compact-01
Label text (fluid)12 / 0.75Regular / 400$label-01

Structure

Default inputs

The width of the search field should appropriately fit the design and layout of content. The width may vary based on the grid and layout.

ElementPropertypx / remSpacing token
Search icon
Close icon
height, width16 / 1
Small fieldpadding-left, padding-right32 / 2$spacing-07
Medium fieldpadding-left, padding-right40 / 2.5$spacing-08
Large fieldpadding-left, padding-right48 / 3$spacing-09
Structure and spacing measurements for default small search

Structure and spacing measurements for default small search | px | rem

Structure and spacing measurements for default medium search

Structure and spacing measurements for default medium search | px | rem

Structure and spacing measurements for default large search

Structure and spacing measurements for default large search | px | rem

Fluid inputs

The width of the search field should appropriately fit the design and layout of content. The width may vary based on the grid and layout.

ElementPropertypx / remSpacing token
Labelmargin-bottom4 / 0.25$spacing-02
Fieldpadding-left16 / 1$spacing-05
padding-right80 / 5$spacing-11
border1px
margin-top, margin-bottom13 / .8125
Close iconpadding-right, padding-left12 / .75$spacing-04
Search iconpadding-right, padding-left12 / .75$spacing-04
Structure and spacing measurements for fluid search

Structure and spacing measurements for fluid search | px | rem

Sizes

SizeHeight px / rem
Small (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Sizes for search

Search sizes | px / rem