Input Bar

Input bar is a text field designed for the user to enter search queries or communicate information in chat.

Input should have ability to expand without adding scrollbars.

It consists of several parts — input text, Icon, prefix, and suffix.

Input text

Contains the value inputted by a member and it uses the same typography style and logic as regular input. It can also include predefined placeholder.


Icon is used to give more context to the input bar. The icon is vertically centered element.


Prefix contains medium sized button.


Suffix contains medium sized button.

$input_bar-background-color          : palette(cg8);
$input_bar-border-radius             : unit(1);

$input_bar-min-height                : unit(9);

$input_bar-padding-horizontal        : unit(2.75);
$input_bar-padding-vertical          : unit(1.75);

$input_bar-icon-padding-right        : unit(1);

// Text

$input_bar-value-text-type           : 'user-input';
$input_bar-value-placeholder-theme   : 'muted';
$input_bar-value-placeholder-opacity : 0.48;

$input_bar-max-multiline-rows-number : 5;