Text Input Components

A Text Input component displays a text area to the user and allows them to edit it, with an optional button allowing clearing of the text.

The Text Input component maps directly to the TextInputRef equivalent in React Native JSX.

This view displays editable text as well as a blinking caret (a vertical line which indicates the current editing position). The view can receive focus but must be activated in order to receive input. A text input is activated by selecting it once it has focus. The clear button, however, cannot be interacted with using focus navigation.

See also Text Design.


Class CYITextEditView
Component Type input
Component Sub-Type regular
Example Layer Comment class:CYITextEditView; componentType:input; componentSubtype:regular;

Required Layers

Layer Description
Text Layer name for the text field. It must be a text layer which uses point type and left justification.
InputProperties Solid color to mark the end of the text edit field and to set the color of the input text. The parent field of InputProperties needs to be set to the Text layer in After Effects.

Optional Timeline Markers

Marker Description
FocusIn The animation played when a text input receives focus.
FocusOut The animation played when a text input loses focus. If not defined, the reverse of FocusIn is used.
Blink An optional timeline that’s looped while the text input is active. If not provided, the caret blinks on and off using a timer. The visibility track must not be used to animate the blink, as the caret is shown and hidden in normal operation of the view.

Optional Layers

Layer Description
Caret Layer name for the caret. If no Caret layer exists, a default black, rectangular caret is created. Change the color of the caret using the caret-color comment or the SetCaretColor function. The caret’s anchor point is positioned at the baseline of the text. Note that this layer must not be layer-parented to another layer.
Clear Layer name for the button that clears the text field. Layer must be a CYIPushButtonView. This button is made non-focusable at initialization time, even if it contains focus timelines.


Property Description Input Values
Clipping Allows the layers overflow to be displayed or clipped so the overflow isn’t visible outside of the bounds of the composition. Default On Off
Input Type Sets the keyboard type. Default: Text Text Telephone Number Number E-mail URI
Text Color Sets the color of the text in the text edit field. The RGB and RGBA values must be prefixed by the # symbol. Example: #FF000099 or #FF0000. A string value, for example, #RRGGBBAA or #RRGGBB
Default Text Sets the default “hint” text displayed in the text edit field. Removed when the user begins typing. A string value
Is Password Enables masking of the input and disables keyboard suggestions for the input field where applicable. Default: Disabled Enabled Disabled