New to Telerik UI for Blazor? Download Free 30-day trial

PromptBox - Adornments

Configurator

Mode

Show Start Affix

Show End Affix

Show Top Affix

File Select Position

  • Adornments.razor
Loading the demo source code...please wait.
Style in ThemeBuilder
  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming

Description

The Telerik UI for Blazor PromptBox provides flexible affix templates that allow you to customize the component layout by adding custom content in three strategic positions: start, end, and top.

The Start Affix Template (PromptBoxStartAffixTemplate) displays content at the beginning of the input area. In single-line and auto modes, it appears on the left side of the input, while in multi-line mode it appears at the bottom-left. This position is ideal for icons, status indicators, or action buttons that should appear before the input field.

The End Affix Template (PromptBoxEndAffixTemplate) displays content at the end of the input area, typically on the right side or bottom-right in multi-line mode. This position is commonly used for custom action buttons or additional functionality that complements the built-in action button.

The Top Affix Template (PromptBoxTopAffixTemplate) is unique to multi-line mode and appears above the text area. It is perfect for displaying contextual information, suggestions, or helper text that provides guidance to users as they type.

This demo showcases how affix templates work across different PromptBox modes and demonstrates practical use cases such as repositioning the file select button. Use the configurator to toggle individual affixes on and off, switch between modes, and observe how the layout adapts. Note that the top affix is only available in Multi Line mode and automatically disables when other modes are selected.

This Blazor PromptBox Adornments example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.