# Input Control Architecture

Wijmo more about Wijmo's input control architecture in this documentation topic

## Content


Wijmo's input controls are composed of standard HTML elements. Many have an inner input element where the user can type, buttons used to show drop-down editors, or clickable/selectable areas.

All Wijmo input controls are designed to make data-entry easy and effective by providing early validation, whenever possible. For example, our input controls do not even allow to enter alphabets in a numeric input control instead of validating the same at a later stage. Similarly, user cannot clear the contents of control, if the isRequired property of that control is set to true.

Most of Wijmo's input controls have a set of common properties that reflect basic HTML attributes:

- __isRequired__: "required" attribute
- __isDisabled__: "disabled" attribute

The "is" prefix prevents conflicts in markup between the names of control properties and HTML attributes.

Input controls based on HTML input elements have more properties in common:

- __inputElement__: reference to the inner input element
- __isReadOnly__: "readonly" attribute
- __text__: formatted value
- __value__: parsed text
- __format__: format used to convert between text and value

And controls used to input numbers, dates, and times have the folowing properties in common:

- __min__: minimum value
- __max__: maximum value
- __step__: increment applied with mouse wheel or spinner buttons

# DropDown

The __DropDown__ control is an abstract class, used as a base for several controls. It is composed of the following elements:

- __input element__ (exposed by the __inputElement__ property):
 An HTML input element used to display and edit the current value. In few cases, this element may be replaced with a non-editable element (e.g. Menu and MultiSelect controls).
- __drop-down button__:
A button used to show or hide the drop-down element.
- __drop-down element__ (exposed by the __dropDown__ property): 
An HTML element shown when the user presses the drop-down button or the F4 key. The user interacts with the drop-down element to update the value of the input element and of the control.

All dropdown controls have the following properties and events:

- __text__: Gets or sets the current value of the inputElement.
- __textChanged__: Event that fires when the value of the text property changes..
- __isDroppedDown__: Gets or sets a value that determines whether the drop-down is currently visible.
- __isDroppedDownChanging__, __isDroppedDownChanged__: Events that fire when the value of the isDroppedDown property changes.
- __isAnimated__: Property that determines whether the control should use animations when showing the drop-down.
- __dropDownCssClass__: Class added to the drop-down element in order to allow CSS styling of the drop-down. This property is useful because when the drop-down is displayed, it is usually re-parented to become a direct child of the document's body, which prevents it from inheriting the styles of the control's host element.