Skip to main contentCarbon Design System

Search

Color

Inputs come in two different colors. The default input color is $field-01 and is used on $ui-background and $ui-02 page backgrounds. The --light version input color is $field-02 and is used on $ui-01 page backgrounds.

ElementPropertyColor token
Fieldbackground-color$field *
border-bottom$border-strong *
Field texttext color$text-primary
Prompt texttext color$text-placeholder
Iconfill$icon-secondary

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

Example of Search using $field-01

Example of Search using $field

Interactive colors

ElementPropertyColor token
Input:focusborder$focus
Field:disabledbackground-color$field *
border-bottomtransparent
Field text:disabledtext color$text-disabled
Icon:disabledfill$icon-disabled
Enabled, focus, and disabled search states

Examples of enabled, focus, 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

Structure

The width of the search field should appropriately fit the design and layout of content.

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

Structure and spacing measurements for large search | px | rem

Structure and spacing measurements for small search

Structure and spacing measurements for small 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