---
metaTitle: Description Input component | AwesCode UI
meta:
  - name: description
    content: The <AwDescriptionInput /> component is used to render Description Input wrapper - UI Vue component for AwesCode UI.
title: Description Input
---

# Description Input

**Category:** Molecule | **Import:** Global

The `AwDescriptionInput` component wraps an input field with a description text below it.

## Overview

`AwDescriptionInput` provides a wrapper that combines an input field (via slot) with a description text that appears below it. It's useful for form fields that need helper text.

## Usage

### Basic Example

```markup
<AwDescriptionInput text="Enter your email address">
    <AwInput v-model="email" label="Email" />
</AwDescriptionInput>
```

### With Text Slot

For more complex description content, use the `text` slot:

```markup
<AwDescriptionInput>
    <AwInput v-model="apiKey" label="API Key" />
    <template #text>
        <AwFlow :gap="1">
            <span>Learn more in our</span>
            <AwLink href="/docs">documentation</AwLink>
        </AwFlow>
    </template>
</AwDescriptionInput>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| text | Description text (plain text only, use `text` slot for rich content) | `String` | `false` | `''` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Input field component | - | - |
| text | Custom description content | - | - |

### Events

No events are emitted by this component.

## Related Components

- `AwInput` - Input component
- `AwDescription` - Description component
- `AwForm` - Form component

## Component Behavior

### Text Rendering

The component provides two ways to add description text:

**Via Text Prop:**
```markup
<AwDescriptionInput text="Helper text here">
    <AwInput v-model="value" label="Field" />
</AwDescriptionInput>
```
- Simple string-based description (plain text only)
- Use for simple helper text without formatting
- Only shows when `text` prop is not empty
- **Deprecated:** HTML in `text` prop is deprecated, use `text` slot for rich content

**Via Text Slot:**
```markup
<AwDescriptionInput>
    <AwInput v-model="value" label="Field" />
    <template #text>
        <span>Custom content with <AwLink href="/docs">links</AwLink></span>
    </template>
</AwDescriptionInput>
```
- Full control over description content
- Can include Vue components (AwLink, AwBadge, etc.)
- Renders AwDescription wrapper automatically
- Takes precedence over `text` prop if both are provided

### HTML Content (Deprecated)

**Note:** HTML in the `text` prop is deprecated. Use the `text` slot for rich content instead.

- HTML content in `text` prop is sanitized using the `sanitize()` utility
- Prevents XSS attacks by removing malicious scripts
- Safe tags like `<strong>`, `<em>`, `<a>` are preserved
- **Recommended:** Use `text` slot with Vue components (AwLink, AwBadge, etc.) instead of HTML strings

### Slot Priority

When both `text` prop and `text` slot are provided:
1. `text` slot takes precedence
2. `text` prop is ignored
3. Use either one, not both

## Notes

- **Import Method:** Global - Available as molecule component
- Description only shows when `text` prop is not empty or `text` slot is used
- Use for form fields that need helper text or instructions
- **Recommended:** Use `text` slot for any rich content instead of HTML in `text` prop
- HTML in `text` prop is deprecated but still sanitized for backward compatibility