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
.bx--search-inputborder-bottom$border-strong
.bx--search-inputtext color$text-primary
.bx--search-input::placeholdertext color$text-placeholder
.bx--search-magnifierfill$icon-secondary
Example of Search using $field-01

Example of Search using $field

Interactive colors

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

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-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 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