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.
Suffix Adornments
The TextArea 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
flowoption of the TextArea tohorizontal. - By default, the adornment's orientation is horizontal. To change the direction, set the
adornmentsOrientationoption of the TextArea tovertical.
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
By default, the prefix and suffix adornments are part of the TextArea. When you set the disabled property to true, the TextArea applies disabled styling to the adornment elements. This styling sets pointer-events to none and adjusts the opacity to match the disabled appearance. The adornments visually align with the disabled state of the TextArea, but still focusable through keyboard navigation.
To override the default behavior and make the adornments interactive, 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.
Programmatically Disabling Adornments
The TextAreaPrefixComponent and TextAreaSuffixComponent give you full control over the elements displayed as adornments. You can programmatically control the disabled state based on the specific element you are rendering.
The following example demonstrates how to set the disabled property of the adornments when you disable the TextArea.