Search box

The textbox is an area where the user can type in and edit text. It can contain both values and one or multiple lines of text.

Variations

The textbox can be used in a standard version and with steppers.

Standard search box

The placeholder texts describes the value or text that should be inserted. Usually it does not need to be labeled.

Specs

Describes how the search box is built up and styled.

Anatomy

The search box is a version of the textbox, but with a centered label and a search icon on the right side of the box.

Components
1
Search box container
2
Search box text
3
Icon

Colors

The search box uses the normal style.

Element
Color name
1
Search box container
style-normal
2
Disabled text
color-ui-element-disabled
3
Icon
color-ui-element-neutral
4
Selected search box container
style-normal-active
5
Enabled text color
color-ui-element-active

Typography and icons

The alignment of the text varies based on type and state of the search box. When the search box is selected and you start typing, the text becomes left-aligned.

Text category
Text attributes
1
Body
Aa
Typeface: Open Sans
Weight: Regular
Size: 16px
Line height: 24px
2
Body
Aa
Typeface: Open Sans
Weight: Regular
Size: 16px
Line height: 24px

Measures and spacing

The search box uses the the same height as buttons to make sure its clickable. The width can be customised to fit its content and space in interface.

Standard search box
1
Component measures
2
Spacing
3
Border sizes

States

The look of the states are defined by the style.

Standard Searchbox
Enabled
Textbox container
style-normal-enabled
Hover
Textbox container
style-normal-hover
Pressed
Textbox container
style-normal-pressed
Focused
Textbox container
style-normal-focused
Disabled
Textbox container
style-normal-disabled
Textbox text
color-ui-element-disabled
Active
Textbox container
style-normal-active
Text color
color-ui-element-active