---
title: "body"
description: "Place UI components inside a dialog body."
permalink: /docs/runtime/all-ui-components/dialog/body/
---
# body

## Overview

```xml
<body/>
```

Developers can nest other UI components in the `body` tag so that they display in the `dialog`.

### **Basic Example**

The following is an example of a dialog with a `<text-input/>`:

**main.view\.xml**

```xml
<var name="input_field" type="text" />

<dialog id="dialog-input" title="Input Dialog" subtext="Please enter text">
    <body>
        <text-input label="Username" placeholder="Please enter your username"
                    bind="input_field" required="true" />
    </body>
    <button-group>
        <button label="Should validate" on-press="$:onUsernameSubmit()" validate="true" />
    </button-group>
</dialog>
```

**main.js**

```javascript
function onUsernameSubmit() {
    // logic here on a valid username
}
```

## Advanced Attributes

### `align`

<SyntaxCard type={["center","fullwidth","left","right"]} defaultValue={"center"} />

Specify the alignment of the `body` relative to the `dialog`.
