# 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/>`:

{% code title="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>
```

{% endcode %}

{% code title="main.js" %}

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

{% endcode %}

## Standard Attributes

None

## Advanced Attributes

### `align`

**Optional**

**Type**: `center` | `fullwidth` | `left` | `right`

**Default**: `center`

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