New to Kendo UI for AngularStart a free 30-day trial

Adornments

You can enhance the visual and functional aspects of the TextArea component by using custom adornments in the form of prefixes and suffixes. Decorating the component allows you to make it more user-friendly and engaging.

Prefix Adornments

The TextArea allows you to add custom items as prefix adornments by using the TextAreaPrefixComponent.

Change Theme
Theme
Loading ...

Suffix Adornments

The TextArea allows you to add custom items suffix adornments by using the TextAreaSuffixComponent.

Change Theme
Theme
Loading ...

Flow Direction

The TextArea provides the option for specifying the flow direction and adornment's orientation:

  • By default, the flow is vertical. To change the direction, set the flow option of the TextArea to horizontal.
  • By default, the adornment's orientation is horizontal. To change the direction, set the adornmentsOrientation option of the TextArea to vertical.
Change Theme
Theme
Loading ...

Separator

To visually separate the prefix and suffix, set the showPrefixSeparator and showSuffixSeparator properties of the TextArea to true. To separate multiple adornment items, you can add a Separator component.

Change Theme
Theme
Loading ...

Disabling Adornments

By default, both the prefix and suffix adornments are treated as a constituent part of the TextArea. When you set the disabled property of the TextArea to true, you also automatically apply the disabled styling to the elements inside the adornments. This ensures that the adornments visually align with the disabled state of the TextArea. Specifically, the custom prefix and suffix elements will have their pointer-events set to none and their opacity adjusted to match the disabled appearance of the component.

To override the default behavior and ensure that the adornments are interactive, please check out the Enabling Adornments in a Disabled Inputs Component Knowledge Base article.

The following example demonstrates how to visually disable the TextArea adornments by setting the disabled property of the component.

Change Theme
Theme
Loading ...

Programmatically Disabling Adornments

The TextAreaPrefixComponent and TextAreaSuffixComponent grant you full control over the elements that will be displayed as adornments for the TextArea. This means that you can programmatically control the disabled state based on the specific element that you are rendering.

The following example demonstrates how to set the disabled property of the adornments when you disable the TextArea.

Change Theme
Theme
Loading ...