Table of Contents |
Textbox
Overview
Textbox is the name used to describe an input element that accepts a string of text with no line breaks.

To add a Textbox element, go to Base Types > Textbox and add it to the canvas.
To add a prebuilt Label / Textbox prebuilt custom type, go to Custom Types > Common: Label | Textbox and add it to the canvas.
Type of Data Stored
A Textbox stores a string of text with no line breaks or styling.
A Textbox is capable of storing up to 4000 characters, including spaces and punctuation.
A Textbox has no limit on the type of characters that can be inputted.
A Textbox has no line wrapping. If the text entered in a Textbox exceeds the width of the textbox, it will be hidden on the right side of the textbox. Navigating the caret to the right will make the Textbox content scroll, however clicking off of the Textbox will make it scroll back to the beginning.
Attributes
Attribute | Description |
---|---|
description | This is the description of the element used by other modules in the clevr platform. For more information on how description is used, please read this article.
A description should be placed on all input elements, to allow them to be identifiable in those modules. |
maxlength | This is a definable input character limit below the default limit of 4000 characters. This limit includes spaces and punctuation.
If a maxlength greater than 4000 is defined, it will be ignored and the default maxlength of 4000 will apply. |
placeholder | This is an temporary hint that can be displayed in a datepicker before content in inputted. When using placeholder, do not place important information about what the inputted data represents, as once the element is populated the placeholder will disappear.
![]() ![]() For more information on the proper use of placeholders, please read this article. |
date-format |
This attribute defines how date formats are read and written to this textbox when using functions such as updateDate and toDate. It does not place a restriction on the users ability to input a value. If the value of the element does not match the date-format, the functions will not be able to read the values as a date. The attribute can define any combination of the following groups:
|
is-date-picker |
When this attribute is set to true, it will indicate to other modules within clevr that this Textbox should be treated as a datepicker and that it is storing date information. If this attribute is applied, then the values will have to be inputted in a yy-mm-dd format or the other modules will not understand how to parse them as dates. |
disabled |
This will disable the element and prevent modification for all roles, regardless of applied permissions. The disabled attribute should only ever have the value “true” applied. A value of “false” will still make an element disabled. The disabled attribute differs from readonly as it visually greys-out the element to indicate that it is disabled. Utilizing disabled is preferrable to readonly, as it provides visual feedback to the user for why they can’t modify the element. |
readonly |
This will disable the element and prevent modification for all roles, regardless of applied permissions. The readonly attribute should only ever have the value “true” applied. A value of “false” will still make an element readonly. The readonly attribute differs from disabled as it provides no visual feedback to the user that the element can not be modified. Utilizing disabled is preferrable to readonly, as it provides visual feedback to the user for why they can’t modify the element. |
shadowId |
This attribute will cause this element to be populated with the value of another element, if the element has never had a value applied in the current record. A value applied to an element, even if blank, will override the value coming from the shadowId. For this reason, we recommend applying the class = “unhook” which will prevent the value from saving its own value. For more details on shadowId, please read this article. |
Other attributes may be applicable to Textboxes, such as searchable, bulkdataentry, SIS Data Import, and attributes related to Data Tables. Information on the use of those attributes can be found in the applicable lessons.
Import Data
Textboxes are an ideal element to use Import Data into. Because they store a string of text, they can store any data that is being sent by your SIS or stored in the demographics file your organization provided to clevr.
For more information about setting up elements for Import Data, please read the lesson called “SIS and GDI Import” in Level 2.
Compatible Common Functions
The following common function are compatible with with Textboxes:
- Input Mask
- updateAge
- formCalc
- elementsToArrayOfStrings
- updateVal
- updateDate