PromptBox Adornments
The Blazor PromptBox component provides flexible adornment templates that allow you to add custom elements such as buttons, icons, or components around the input area. Adornments adapt intelligently to the current input mode, ensuring optimal layout and user experience.
You can also control the order of action buttons by arranging them within the templates.
The PromptBox supports three types of adornment templates that position content in different areas of the component based on the current input mode.
Adornment Types
Start Affix Template
The PromptBoxStartAffixTemplate renders content at the beginning of the input area. Its positioning adapts based on the current input mode:
- SingleLine and Auto (while the input is one line tall): The affix is displayed on the left side, inline with the text
- MultiLine and Auto (after the input grows to multiple lines): The affix moves to the bottom-left corner of the input area
In Auto mode, the position updates automatically as the input expands from one line to multiple lines while the user types.
Start affix with mode-aware positioning
End Affix Template
The PromptBoxEndAffixTemplate renders content at the end of the input area, typically used for action buttons or secondary controls:
- SingleLine and Auto (while the input is one line tall): The affix is displayed on the right side, inline with the text
- MultiLine and Auto (after the input grows to multiple lines): The affix moves to the bottom-right corner of the input area
In Auto mode, the position updates automatically as the input expands from one line to multiple lines while the user types.
End affix with multiple interactive elements
Top Affix Template
The PromptBoxTopAffixTemplate renders content above the input area and is only visible in MultiLine mode or when Auto mode has expanded:
- SingleLine: Not displayed
- MultiLine: Always visible at the top
- Auto (Default): Appears after expansion to multi-line
Top affix for header information and controls
Action Buttons Configuration
Add the desired action button tag within the affix template to configure its position.
Example with action buttons arranged