# 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 when in multi-line mode. To add custom content to the start of the PromptBox input area, use the [`startAffix`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxprops#startAffix) template.

The following example demonstrates the start adornment in action.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/conversational-ui/promptbox/adornments/start/source.txt)

## 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 [`endAffix`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxprops#endAffix) template.

The following example demonstrates the end adornment in action.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/conversational-ui/promptbox/adornments/end/source.txt)

## Top Affix

The top adornments are displayed above the input area of the PromptBox and only apply in `'multi'` [`mode`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxprops#mode). To add custom content to the top of the PromptBox input area, use the [`topAffix`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxprops#topAffix) template.

The following example demonstrates the top adornment in action.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/conversational-ui/promptbox/adornments/top/source.txt)

## 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.

```html
<PromptBox :action-button-config="false">
  <template #startAffix="{ actionButtonProps }">
    <PromptBoxActionButton v-bind="actionButtonProps" />
  </template>
</PromptBox>
```

Here is a list of the built-in controls and their respective components:

* [`PromptBoxActionButton`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxactionbutton)—Component for the Action button.
* [`PromptBoxSpeechToTextButton`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxspeechtotextbutton)—Component for the Speech-to-Text button.
* [`PromptBoxUploadButton`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxuploadbutton)—Component for the Upload button.

The following example demonstrates how to reposition the built-in **Action** control using the adornment components.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/conversational-ui/promptbox/adornments/reorder/source.txt)

## Disabling Adornments

By default, the adornments are part of the PromptBox. When you set the [`disabled`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxprops#disabled) property to `true`, the PromptBox applies disabled styling to the adornment elements. This styling sets [`pointer-events`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) to `none` and adjusts the [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/conversational-ui/promptbox/adornments/disabled-items/basic/source.txt)

### 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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/conversational-ui/promptbox/adornments/disabled-items/programmatic-control/source.txt)

## Suggested Links

* [PromptBox Modes](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/promptbox/modes)
* [PromptBox Appearance](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/promptbox/appearance)
* [API Reference of the PromptBox](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxprops)