TextBox (Vue)

Along with the button component (Button), the text box is one of the most basic and popular components of a graphical user interface. We are talking about entering text without formatting (such as bold or italics), and a text editor with support for text formatting is a separate and rather complex topic. But despite the lack of formatting, there is a lot of data that is accepted from the user through this component: names, addresses, all sorts of titles. Moreover, "text" means not only a set of completed sentences, but also any information that can be represented as a sequence of characters:

• Email addresses
• Passwords
• Links

In addition, this component is sometimes used for entering numeric data, although often these are not numbers, but sequences of digits sometimes mixed with auxiliary characters:

• Phone numbers
• Postal codes
• Credit card numbers

In most cases, this component does not provide for line breaks, and when a large number of characters is entered, only a part of them is displayed, although scrolling is possible using the arrow keys. However, in cases where the user is required to enter exactly completed sentences (maybe even paragraphs), the possibility of line breaks is required, which can sometimes be considered as simple text formatting. From the point of view of HTML, a separate type of element is used for multi-line text (and automatic height adjustment is not initially provided), but in YDF to support multi-line mode, you only need to specify the corresponding option, and automatic height adjustment is also available.

As in the case of buttons, the simplicity of the text field is deceptive. Firstly, the text input field is a validatable component, and therefore all the complexity of the task of validation of input data has a direct relation to it. In YDF, a text input field, like other components wrapped in the ValidatableControlShell component, includes optional auxiliary elements such as a label, a comment, a list of validation errors, and so on, although from the point of view of HTML these are all separate elements.

The text input field has many states. Visually distinguishable should be at least:

:hover

Activated when the mouse cursor is hovered over, letting the user know that the system is responding to their actions and if they click on the input field, they will be able to start typing.

:focus

Activated when the text field has taken focus, that is, keyboard input will be accepted inside this text field.

:readonly/:disabled

Active when the input field is read-only. This functionality is not as rare as it seems, because many applications have a view mode and an edit mode.

Invalid state

Active when the entered value is not valid, and also if the validity display mode is active. If the input field is initially empty and mandatory, the empty value is invalid from the beginning, however, before highlighting the field in red and informing the user who has not yet done anything about validation errors, the user should be allowed to fill in this field, and only when they remove focus from the input field can the validity display mode be activated. Note that such a concept from the HTML/CSS point of view does not exist, and therefore if validation is defined through HTML attributes like required and minlength and styles for the pseudoclass :invalid, then these styles will be applied regardless of whether the user has started entering data into empty fields or not yet.

Moreover, some of these states can occur simultaneously. For example, the hover state can occur simultaneously with focus, and both of these states can occur on top of invalid. This raises the question of style priority.

Also, in practice, the following additional functionality is in demand for the input field:

• Icons, which, depending on the design, can be either on the left or on the right
• Password show/hide button
• Button for copying the entered value

All this functionality is available in the TextBox component.

• Overview
• TextBox Class
  • Vue Properties

Overview

Component class

TextBox

Live templates of Vue Component (IntelliJ IDEA IDEs family official plugin)

Autocomplete-like

Pug Syntax

TextBox--YDF-Vue-Pug

HTML Syntax

TextBox--YDF-Vue-HTML

Abbreviation

Pug Syntax

tb-ydf-vue-pug

HTML Syntax

tb-ydf-vue-html

Stylus mixin for styles generating

generateTextBoxYDF_GUI_ComponentStyles

Pre-made themes

TextBox.Themes.regular

Regular (Default)

Pre-made geometric variations

TextBox.GeometricVariations.regular

Regular (Default)

TextBox.GeometricVariations.small

Small

TextBox.GeometricVariations.labelLike

Label like

Geometric modifiers

TextBox.GeometricModifiers.noRoundings

No roundings

Pre-made decorative variations

TextBox.DecorativeVariations.regular

Regular (Default)

TextBox.DecorativeVariations.labelLike

Label like

Loading placeholder

Unavailable

TextBox Class

Vue Properties