PromptBox Adornments
Further customize the elements around the input area by using the specialized adornment components.
The PromptBox provides three adornment components, and each of them renders content in a specific location relative to the input area—start, end, and top.
Start Affix
The start adornments are displayed on the left side of the input in single-line mode and at the bottom left corner in multi-line mode. To add custom content to the start of the PromptBox input area, use the <kendo-promptbox-start-affix> component.
The following example demonstrates the start adornment in action.
End Affix
The end adornments are displayed at the end of the input, before the built-in controls. To add custom content to the end of the PromptBox input area, use the <kendo-promptbox-end-affix> component.
The following example demonstrates the end adornment in action.
Top Affix
The top adornments are displayed above the input area of the PromptBox and only apply in 'multi' mode. To add custom content to the top of the PromptBox input area, use the <kendo-promptbox-top-affix> component.
The following example demonstrates the top adornment in action.
Reordering Built-in Controls
You can use the adornment components to reposition the built-in controls of the PromptBox. For example, you can move the Action button to the start adornment area and the Speech-to-Text button to the end adornment area.
<kendo-promptbox>
<kendo-promptbox-start-affix>
<kendo-promptbox-action-button></kendo-promptbox-action-button>
</kendo-promptbox-start-affix>
</kendo-promptbox>Here is a list of the built-in controls and their respective components:
<kendo-promptbox-action-button>—Component for the Action button.<kendo-promptbox-speech-to-text-button>—Component for the Speech-to-Text button.<kendo-promptbox-fileselect-button>—Component for the File Select button.
The following example demonstrates how to reposition the built-in Action control using the adornment components.
Disabling Adornments
By default, the adornments are part of the PromptBox. When you set the disabled property to true, the PromptBox 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 PromptBox but remain focusable through keyboard navigation.
The following example demonstrates a disabled PromptBox with visually disabled adornments.
Programmatically Disabling Adornments
The adornment components give you full control over the elements rendered inside. Programmatically control the disabled state of used components within the adornments to ensure they are truly disabled when the PromptBox is disabled.
The following example demonstrates a disabled PromptBox with truly disabled controls inside the adornments.