Bauhaus Design System

TextInput ​

Usage ​

Text Input component allows users to input text formats in the field. They are usually found within a Form Group but can also be standalone, part of a Modal or Card. It is recommended to use this component always with the Label.

Types ​

Text Input component can have the following properties/types:

  • With Label or Without Label. To be used with Form Label component here.When it is With Label, the Form Label component controls the placement of label relative to the Text Input component; either Above or Left. Label Right option of Form Label is disabled for Text Input component.

INFO

In Figma however, the Label placement is controlled by the Text Input component itself, due to the way Figma works with nested components.

  • With or Without Help Text (of type Info), passed as an object property, following the Help Text properties declaration.

  • With or Without Validation If there is a validation in the specific Text Input component then the component can have either of these three validation statuses: None (default), Validated and Invalid. Validated and Invalid statuses use Help Text to display a descriptive message on the status of validation. Below you can find more guidelines on how to present validation messages. If a Text Input component is With Help Text (of type Info) and it is also With Validation then Validation related status display within a Help Text overrides the original Help Text of the type Info, which means validation message has more weight than the Help Text of type Info. Depending on the use case, validation can happen either after active submission of the form by user or when user clicks elsewhere after typing in the Text Input.

 
 
 

Distinction between input component level validation and a form level validation ​

There are two ways user input can be validated: Validation on a form level or in each individual input component.

Validation on the input component level happen per the specific input component such as Text Input and its validation message (Help Text component) is displayed in the context of the input element.

Validation on a Form Group level happens when several elements inside a Form Group can be checked at the same time and a common validation message can be displayed (such as in the examples of Login forms, where a single ‘Invalid’ message is displayed for either/both Login name and Password invalidity). In such cases Help Text is used as a validation message of the whole Form Group and is placed detached from the input components. However, each input component that is affected, change its status to Invalid or Validated accordingly, but without individual validation message (Help Text components) per each component.

Anatomy and Behavior ​

  1. Container - is a clickable area of the component that enables and contains user’s input.
  2. Label - is the atom component - Form Label. Form label is a word or a phrase that describes what is the requested input from the user. It can be either at the left side or above the container. Form Label should be always visible, short and clear. Form Label shouldn’t be truncated or take up multiple lines.
  3. Input text- It can be a placeholder text that can hold an example input text that transforms into user input once user starts typing. Avoid using placeholder text to communicate critical information because this approach is not accessible. Use labels or helper text to describe the purpose of the field and how to use it. If user input is longer then the width of the container allows, text does not wrap down and the container does not grow in size. In this case goes on horizontally until maximum allowed characters are reached and when user stops typing the text truncates with ellipsis on the right side.

 
 

  1. Help text - is a nested component - Help Text. It is an optional property of the Text Input component. It conveys additional guidance about the input field. Help Text can take up to two lines. If Text Input component has a Validation property, Help Text can be used as feedback on the value input by user, informing if the input is Valid or Invalid with appropriate icons and color coding.

    • Invalid - Help text mush show error message when user needs to be informed of wrong input or lack of input. If only one error is possible, error text describes how to avoid the error. If multiple errors are possible, error text describes how to avoid the most likely error.
    • Validated - If an input is validated then Help text must communicate it with corresponding message and color coding. After the input has been validate, changes made by user in the Text Input restore the component’s default state until user confirms the input by actively saving, submitting or clicking outside the Text Input depending on use case.

  2. Leading and Trailing Icons - These icons are optional, and are not used at the same time. There is a distinction between when to use a leading and when to use a trailing icon. Leading Icon informs of an input type. Leading icon creates better user experience by introducing a relevant icon next to the Input Text. For example having an Earth icon can hint users that they should put a location information here. It helps users understand the meaning of the field at a glance (users can just scan the content and not necessarily read each text). Trailing Icon communicates the action (e.g. to represent the text input to search use Magnifier as a trailing icon) or any additional information.

  3. Cursor - A blinking cursor indicates the current location of text input in a field. It is activated when user clicks on clickable area of Text Input and while user is typing. Default HTML cursor can be used.

Behavior

  • Pressing ‘Tab’ converts the Text Input component into :focus state, as well as clicking on the component. In both scenarios component has a blinking Ibeam cursor indicating readiness to type.
  • If the contents of the component are longer than the width of the container, then the text will get truncated and a Title attribute (a native HTML element like Tooltip) will display user the full text that is being hidden.

States ​

  • Default Text Input can have :hover, :focus, Disabled states. Once user clicks on the Text Input (:active) it gets activated to allow user input and it is the same state as :focus
  • Invalid Text Input can only have :hover state. Once user clicks on Text Input it resets to default and is in :focus state.
  • Validated Text Input can only have :hover state. Once user clicks on Text Input it resets to default and is in :focus state.

Gaps and Sizes ​

  • Container height: XLplus (Fixed)
  • Gap between Form Label and container - Label Above variant: 2XS
  • Gap between container and help text: 2XS
  • Text and leading icon are left aligned
  • Arrow is right aligned
  • Gap between Placeholder/Input text and Trailing icon: max. space between, min. S
  • Gap between Leading icon and Placeholder/Input text: S
  • Container padding: S

INFO

Note: Text Input component’s width scales responsively to adapt to the viewport and screen size. Therefore, maximum and minimum allowed width should be adjusted according to the use case in every application.

Tokens ​

SCSS Variable
Value
$textInput-bgColor
--color-grey-93
$textInput-placeholder-color
--color-grey-70
$textInput-inputText-color
--color-grey-25
$textInput-inputText-icon-color
--color-grey-70
$textInput-outline-color
none
$textInput-outline-color--focus
--color-azure-45
$textInput-outline-color--invalid
--color-red-50
$textInput-outline-color--validated
none
$textInput-outline-color--locked
--color-grey-86
$textInput-placeholder-color--locked
--color-grey-80
$textInput-inputText-color--locked
--color-grey-70
$textInput-boxShadow
--debossed-1--grey-95
$textInput-boxShadow--hover
--debossed-2--grey-95
$textInput-boxShadow--locked
none
$textInput-cornerRadius
--gutter-2xs
$textInput-padding
--gutter-s
$textInput-iconToText-leadingIcon-margin
--gutter-s
$textInput-iconToText-trailingIcon-margin
--gutter-s

$textInput-text: %input;

Properties ​

ts
export type TextInputProps =
  & FormLabelOptionalProps
  & {
    modelValue: string;
    placeholder?: string;
    icon?: IconName;
    iconRight?: boolean;
    helpText?: string;
    validation?: HelpTextProps['category'];
  };

Configurations ​

Text Input
type Input field element
Normal
No Icon
Info
Help text goes here.
Invalid
This field can not be empty.
Validated
Entry validated.
Disabled
Text Input - with FormLabel
SizesLabel AboveLabel Leading
small
medium
big