Text Area

A component for entering arbitrary text, numeric, and symbolic values into multiple rows. Most commonly used for description when creating entities or entering messages in forms and dialog boxes.

§Application

Unlike TextInput, it has the height of the sum of rows and is used to enter data in free form with any combination of letters, numbers, or symbols.

The minimum height is one row, but we recommend using a component with two or more rows.

If the number of rows is not specified, the height is calculated automatically based on the amount of content.

✅ When to use

1. When more than one line of text is required.
2. When the text must be a lengthy description or a message containing a lot of characters.
3. When it is added to a form with fields that must be filled out.

🚫 When to not use

1. When a filter, authorization form field, or search string is required.
2. When a small number of characters are required (less than 5 words). For this purpose, we recommend using TextInput, a component for single-line text input.

§Types

TextInput has two types: Normal and Clear, which have the same set of functions but look and are used differently depending on the context.

Normal

• The most commonly used type.
• One distinguishing feature of this component is its internal padding and corner radius. These parameters are determined by the element's size and are defined by a specific variable for corner radius (more information here), as well as a 1px stroke.
• Used in forms when free space between components is required, such as padding between form elements.

Clear

• This component's defining characteristic is the absence of a border, with elements positioned within the margins of the input field.
• Used when the type Normal creates visual noise.
• When using this type, make sure that the purpose of this component is clear to the user.

§Structure

1. Value

• Is a required element.
• Can be used as a hint (placeholder) and as entered text.
• The entered text replaces the hint.

2. Clear button

• Is an optional component.
• Used when the field content needs to be erased.
• Displayed when at least one character has been entered in the field.
• Displayed even when the focus is outside the field.
• Is a Button component of type Flat-secondary that inherits all of its properties. For example, the background of the cross is filled on hover.
• When clicking on the clear button, the focus shifts to the field, and the entered value is erased. 3. Additional content

• Is an optional element and is embedded at the bottom right.
• Used when additional text must be added to the outside.
• The text is aligned to the right.
• For example, can be used as a counter (character input counter).

4. Error icon

• Is displayed only in the Inline Error state.
• Works together with Tooltip, offering error descriptions upon hovering over an icon, to achieve a more compact layout of the form.

5. Error message

• Is displayed only in the Outline Error state.
• Is embedded at the bottom left.

§States

Has the following states: Suggest, Default, Hover, Active, Disabled, Inline Error, and Outline Error.

1. Suggest. Inactive state when there is no direct interaction with the component and no data has been entered. In this state, the value may serve as a hint, indicating to the user what kind of information should be entered into the field.
2. Default. Inactive state when there is no direct interaction with the component and data has already been entered. In this state, the hint value changes based on the user's input.
3. Hover. Active state when the cursor hovers over the component area.
4. Active. Active state, triggered by transitioning from the previous component or by clicking on with the cursor. The state resets upon transitioning to a different component or clicking the cursor on an empty area.
5. Disabled. Inactive state of a component when it is not possible to interact with it.
6. Outline error. Active state of the component when an error occurs during validation and is displayed at the bottom of the field along with an explanation.
7. Inline error. Active state of the component when a field validation error occurs, but the error is not displayed. Instead, the error is represented by a special icon that, when hovered over, displays an error Tooltip.

§Sizes

The component comes in four sizes: S, M, L, and XL.

The height and corner radius of the field, as well as the padding inside the field and the size of the text, vary based on the size of the component.

The corner radius depends on the size and is set by variables.

1. S (-g-border-radius-s: 5px;) – used when the standard input is too large (e.g., tables, small cards).
2. M (-g-border-radius-m: 6px;) – basic size, used in most forms and filters.
3. L (-g-border-radius-l: 8px;) – used for search (e.g., service search).
4. ХL (-g-border-radius-xl: 10px;) – used in the communication environment (e.g., website and landing pages).

§User guide

1. Working with the field

• The field may vary in height. TextInput can be used for single-line input.
• We don't recommend including a hint within a field, as the field name will not be visible upon entering a value, unless you have limited space or the purpose of the field is clear to the user.
• Use the same size for all of the complementary components of the form. If you selected size M, all of the other components should be the same size.

2. External field header

• A short field name, preferably limited to one line.
• The component should be placed in line with the field's value, unless the context is mobile or the Dialog size is S, in which case the component's title is displayed on top of the component.

3. Hint with tooltip

• Instructions for filling out the field when hovering over the icon with a question mark.
• Used when the title and meaning should be clarified.
• Should not include more than two paragraphs of text.

4. Additional description

• Can be found at the bottom or to the right of the field.
• Used in rare cases when it is unclear how to fill out a field without an additional description or when explanations for previously entered values are required.