ValidatableControlShell (React)

Input elements like a single-line text field (ValidatableControlShell(type="text")), a multi-line text input (textarea), a dropdown list (select) and so on are usually not used alone, but surrounded by auxiliary elements:

• Caption (usually a label element)
• Comment (for example, "dashes and brackets are optional" for a phone number input field)
• "Required" or "optional" labels
• Validation messages

According to one of the principles of quality design, all these surrounding elements should be made in a single style, so there is a need for a template component whose content will surround the input element. In YDF, such a component is ValidatableControlShell — literally, "the shell of a validatable component". As the name implies, this component is not independent, but must be part of other components, or more precisely, be a shell for them.

• ValidatableControlShell itself is not a validatable component, because it only displays the validation messages passed to it, but at the same time it does not validate anything itself, since validation is the task of the main component that ValidatableControlShell surrounds.
• When choosing the name, the word "wrapper" was avoided as it is much more polysemantic than "shell". Thus, in relation to user interface components, "wrapper" can mean not only literally wrapping the main component on both sides with its elements, but also extending the functionality of the main component.

• Overview
• ValidatableControlShellClass Class
  • React Properties

Overview

Component class

ValidatableControlShell

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

Autocomplete-like

ValidatableControlShell--YDF-React

Abbreviation

vsc-ydf-react

Stylus mixin for styles generating

generateValidatableControlShellYDF_GUI_ComponentStyles

Pre-made themes

ValidatableControlShell.Themes.regular

Regular (Default)

Pre-made geometric variations

ValidatableControlShell.GeometricVariations.regular

Regular (Default)

ValidatableControlShell.GeometricVariations.small

Small

Pre-made decorative variations

ValidatableControlShell.DecorativeVariations.regular

Regular (Default)

Loading placeholder

Unavailable

ValidatableControlShellClass Class

React Properties