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.

ClassPropertyColor token
.bx--search-inputbackground-color$field-01
.bx--search--lightbackground-color$field-02
.bx--search-inputborder-bottom$ui-04
.bx--search-inputtext color$text-01
.bx--search-input::placeholdertext color$text-03
.bx--search-magnifierfill$icon-02
Example of Search using $field-01

Example of Search using $field-01

Interactive colors

ClassPropertyColor token
.bx--search-input:focusborder$focus
.bx--search-input:disabledbackground-color$disabled-01
.bx--search-input:disabledtext color$disabled-02
.bx--search-magnifier:disabledfill$disabled-02
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.

PropertyFont-sizeFont-weightType token
.bx--search--lg16 / 1Regular / 400$body-short-02
.bx--search--sm14 / 0.875Regular / 400$body-short-01

Structure

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

ClassPropertypx / remSpacing token
.bx--search--lgheight48 / 3–
.bx--search--smheight32 / 2–
.bx--search-magnifier
.bx--search-close
height, width16 / 1–
.bx--search--lgpadding-left, padding-right48 / 3$spacing-09
.bx--search--smpadding-left, padding-right32 / 2$spacing-07
Structure and spacing measurements for regular 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