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

# Input

**Category:** Atom | **Import:** Global

The `AwInput` component is a styled text input field with label, error handling, and optional prefix/postfix slots.

## Overview

`AwInput` provides a comprehensive text input component with consistent styling, label support, error states, and flexible slot-based customization. It extends the text field mixin for common input functionality.

## Usage

### Basic Example

```markup
<AwInput v-model="value" placeholder="Enter text" />
```

### With Label

```markup
<AwInput v-model="email" label="Email" placeholder="your@email.com" />
```

### With Prefix and Postfix

```markup
<AwInput 
    v-model="url" 
    label="Website"
    prefix="https://"
    postfix=".com"
/>
```

### With Icon

```markup
<AwInput v-model="search" label="Search">
    <template #icon>
        <AwIcon name="awesio/search" class="mx-3" />
    </template>
</AwInput>
```

### With Error

```markup
<AwInput 
    v-model="value" 
    label="Required Field"
    :error="errorMessage"
/>
```

## API

### Props

| Name | Description | Type | Required | Default | Validator |
|------|-------------|------|----------|---------|-----------|
| type | Input type (text, email, number, etc.) | `String` | `false` | `'text'` | Must not be checkbox, radio, date, tel, color |
| prefix | Prefix text or slot content | `String` | `false` | `''` | - |
| postfix | Postfix text or slot content | `String` | `false` | `''` | - |
| size | Input size (sm, md) | `String` | `false` | `'md'` | Must be one of configured sizes |
| theme | CSS theme modifiers | `String` | `false` | `''` | - |

All standard HTML input attributes are also supported via `$attrs`.

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Custom input element | `{ cssClass, value, errorTooltip, mergedListeners, mergedAttributes, errorText, errorId }` | Default input element |
| prefix | Custom prefix content | - | Prefix text |
| postfix | Custom postfix content | - | Postfix text |
| icon | Icon slot | - | - |
| label | Custom label content | `{ cssClass }` | Label text |

### Events

All standard input events are supported (e.g., `input`, `focus`, `blur`, `change`).

### Config Options

The component uses default configuration from `@AwConfig`:

```javascript
export default {
  AwInput: {
    baseClass: 'aw-text-field',
    sizes: ['sm', 'md']
  }
}
```

## Component Behavior

### Input Type Validation
- Invalid types (checkbox, radio, date, tel, color) trigger console errors
- Invalid type suggestions:
  - `checkbox` → Use `<AwCheckbox />` or `<AwSwitcher />`
  - `radio` → Use `<AwRadio />`
  - `date/datetime/time/month/week` → Use `<AwDate />`
  - `tel` → Use `<AwTel />`
- Type validation runs via prop validator
- **Preferred alternatives for number/money:**
  - For number inputs → Use `<AwNumber />` (preferred over `type="number"`)
  - For money/currency inputs → Use `<AwMoney />` (preferred over `type="number"` with prefix/postfix)

### Label Behavior
- Label appears only when `label` prop or `label` slot is provided
- Label is rendered inside the input wrapper (floating label pattern)
- Required indicator shown when `isRequired` is true (from TextFieldMixin)
- Label receives `aw-text-field__label--required` class when required

### Prefix and Postfix
- Prefix/postfix can be text (via props) or custom content (via slots)
- When using text props, wrapper receives `px-4` padding
- Prefix appears before the input, postfix after
- CSS classes: `aw-text-field__prefix`, `aw-text-field__postfix`
- Wrapper adds `has-prefix` or `has-postfix` classes for styling

### Icon Slot
- Icon slot renders inside the input wrapper
- When icon slot has content, wrapper adds `has-icon` class
- Icon positioned with `aw-text-field__icon` class
- Recommended to add `mx-3` class to icons for proper spacing

### Size and Padding
- Two sizes: `md` (default) and `sm`
- Size affects input padding:
  - `md` → `p-3` (12px padding)
  - `sm` → `p-2` (8px padding)
- Size validation checks against configured sizes in `_config.sizes`

### Error Handling
- Error state managed by TextFieldMixin
- Error tooltip shows on input with `v-tooltip.show.prepend`
- Input receives `data-error` attribute when error exists
- Input uses `aria-describedby` for error accessibility
- Error text and ID provided via scoped slot bindings

### Theme Modifiers
- `theme` prop accepts comma-separated modifiers
- Each modifier adds `aw-text-field--{modifier}` class
- Example: `theme="compact,bordered"` → `aw-text-field--compact aw-text-field--bordered`

### Structure
```
<label class="aw-text-field is-{type} [has-icon] [has-prefix] [has-postfix]">
  <div class="aw-text-field__prefix [px-4]">
    <slot name="prefix">{{ prefix }}</slot>
  </div>

  <div class="relative w-full">
    <slot name="element" v-bind="{ cssClass, value, errorTooltip, ... }">
      <input
        class="aw-text-field__element [p-3|p-2]"
        :value="inputValue"
        :aria-describedby="errorId"
        :data-error="errorText"
        v-tooltip.show.prepend="errorTooltip"
      />
    </slot>

    <div class="aw-text-field__label [aw-text-field__label--required]">
      <slot name="label">{{ label }}</slot>
    </div>

    <span class="aw-text-field__icon">
      <slot name="icon" />
    </span>
  </div>

  <div class="aw-text-field__postfix [px-4]">
    <slot name="postfix">{{ postfix }}</slot>
  </div>
</label>
```

## Related Components

- `AwTextarea` - Multi-line text input
- `AwPassword` - Password input
- `AwSelect` - Select dropdown
- `AwDate` - Date input
- `AwTel` - Telephone input
- `AwNumber` - Number input with formatting
- `AwMoney` - Money/currency input with formatting

## Notes

- **Import Method:** Global - Available as atom component
- Extends `TextFieldMixin` for common field functionality (value, error, label, validation)
- Supports error states with tooltip display
- Invalid input types (checkbox, radio, date, tel, color) will show console errors
- Use appropriate specialized components for specific input types
- Size affects padding: `md` uses `p-3`, `sm` uses `p-2`
- Base CSS class: `aw-text-field` (from config)
- Wrapper is a `<label>` element for better accessibility
- Input element uses `mergedAttributes` (combines type, skipAttr, $attrs, and id)
- All standard HTML input attributes supported via `$attrs` (inheritAttrs enabled)
- All standard input events supported via `mergedListeners`