Search box

Updated:

March 29, 2020

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.

Standard search box

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

Component building blocks

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.

Component elements
1
Container
2
Textbox
3
Stepper Container

Colors and styles

The search box uses the normal style.

Element
Color / Style name
1
Container
style-normal
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
3
Border
This is some text inside of a div block.
4
Label
This is some text inside of a div block.
Element
Color / Style name
1
Container
style-normal
style-normal
This is some text inside of a div block.
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Border
This is some text inside of a div block.
This is some text inside of a div block.
4
Label
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Container
style-normal
style-normal
This is some text inside of a div block.
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Border
This is some text inside of a div block.
This is some text inside of a div block.
4
Label
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Container
style-normal
style-normal
This is some text inside of a div block.
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Border
This is some text inside of a div block.
This is some text inside of a div block.
4
Label
This is some text inside of a div block.
This is some text inside of a div block.

Typography and icons

The label tells you about your location in the application and makes it easy to access other parts.

Element
Text style
1
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Body
Element
Text style
1
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Body

Specs

This component is built up by a oval slider and icons.

1
Component measures
2
Spacing
3
Border sizes
1
Component measures
2
Spacing
3
Border sizes

States

The look of the states are defined by the style.

Standard Search box
Component state
Element
Style
Enabled
Textbox container
style-normal-enabled
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Hover
Textbox container
style-normal-hover
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Pressed
Textbox container
style-normal-pressed
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Focused
Textbox container
style-normal-focused
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Disabled
Textbox container
style-normal-disabled
Textbox text
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Focused
Textbox container
style-normal-active
Text color
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Submit feedback