TextArea

Usage

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

Types

Text Area component can have the following properties/types:

• With Label or Without Label. We use Form Label component here. When it is With Label, the Form Label component controls the placement of label relative to the Number Input component; either Above or Left. Label Right option of Form Label is disabled for Text Area component.Note: In Figma however, the Label placement is controlled by the Text Area component itself, due to the way Figma works with nested components.

With or Without Help Text passed as an object property, following the Help Text properties declaration.

With or Without Validation. If there is a validation in the specific Text Area 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 Area 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 Area.

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 happens per the specific input component such as Text Area 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. Due to the nature of Text Area, and depending on the scenario, the Form Label may be longer. (For example: a question). Form Label size even when long should not be truncated.
3. Text Area- It can be a placeholder text that can hold an example input value that transforms into user input once user starts typing. Avoid using placeholder 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.
4. Help Text - is a nested component - Help Text. It is an optional property of the Text Area component. It conveys additional guidance about the input field. Help Text can take up to two lines. If Text Area 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.
5. Scrollbar - is a nested Scrollbar (tiny) component that is an optional property. The text entered may often be longer then the width and height of the container. In this case the text is allowed to be input, the container does not grow but allows the text to be scrollable and a scrollbar appears only then.

States

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

Gaps and Sizes

Container width: Fill container (element adapts to its parent container width). Container height: Fill container. The actual height is decided by the designer depending on the context.

INFO

The height and width of the Container is defined by designer in pixels and then converted into the number of rows and columns, because we use a native HTML Text form element and the size there is defined in this way.

Gap between Form Label and container - Label Above variant: 2XS Gap between container and help text: 2XS Content vertically center aligned. Container padding: S Distance between the Scrollbar and the edges of the container: Unit

Recommendations for Designers Minimum container width: 5XL

Tokens

SCSS Variable

Value

$textArea-bgColor

--color-grey-93

$textArea-placeholder-color

--color-grey-70

$textArea-placeholder-color--locked

--color-grey-80

$textArea-outline-color--focus

--color-azure-45

$textArea-outline-color--invalid

--color-red-50

$textArea-outline-color--locked

--color-grey-86

$textArea-inputText-color

--color-grey-25

$textArea-inputText-icon-color

--color-grey-70

$textArea-inputText-color--locked

--color-grey-70

$textArea-boxShadow

--debossed-1--grey-95

$textArea-boxShadow--hover

--debossed-2--grey-95

$textArea-borderRadius

--gutter-2xs

$textArea-text: %paragraph

Properties

export interface TextAreaProps extends FormLabelOptionalProps {
  id?: string;
  placeholder?: string;
  helpText?: string;
  validation?: Extract<HelpTextProps['category'], 'invalid'>;
  modelValue: string;
}

ModelValues

For more information on ModelValues please have a look to the Vue's Data Binding section.

const modelValue = defineModel<string>({ required: true });