Textbox

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 textbox

The standard textbox is used for one or multiple lines of text.

Textbox with placeholder text

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

Textbox with steppers

The textbox with steppers is used to make it easy to increase or decrease a value by a set increment value (+/- 1 for example).

Specs

The textbox is built up by a container and a text field. When steppers are added, the textbox container are pushed in center.

Anatomy

The textbox is built up by a container and a text field. When steppers are added, the textbox container are pushed in center.

Components
1
Textbox container
2
Textbox text
3
Stepper container
4
Icon

Colors

The textbox and steppers uses the normal style.

Element
Color name
1
Textbox and stepper container
style-normal
2
Text
color-ui-element-active
3
Icons
color-ui-element-neutral

Typography

The alignment of the text varies based on type and state of the textbox. The text in the stepper textbox is center-aligned.

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

Measures and spacing

The textbox 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 textbox
1
Component measures
2
Spacing
3
Border sizes
Textbox with steppers
1
Component measures
2
Spacing
3
Border sizes

States

The look of the states are defined by the style.

Standard textbox
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
Selected
Textbox container
style-normal-selected
Button text
Aa
Body
Labeled enabled
Textbox container
style-normal-enabled
Label text
Aa
Body
Label color
color-ui-element-disabled
Textbox with steppers
Enabled
Textbox and stepper 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 and icons
color-ui-element-disabled
Selected
Textbox container
style-normal-active