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 TextBox allows you to add custom items as prefix adornments by using the TextAreaPrefixComponent.

Suffix Adornments

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

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.

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.

Disabling Adornments

You can ensure the consistent appearance of the TextArea component by controlling the disabled state of the adornments inside the prefix and suffix containers.

The following example demonstrates how to set the disabled property of the buttons that are used as adornments when you disable the TextArea.

Suggested Links

• API Reference of the TextAreaComponent
• API Reference of the InputSeparatorComponent