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

# AwPassword

**Category:** Organism | **Import:** Dynamic

The `AwPassword` component is a password input field with show/hide toggle functionality. It prevents spaces in passwords and handles paste events properly.

## Overview

`AwPassword` provides a password input solution with:
- Show/hide password toggle
- Space character prevention
- Proper paste handling
- Eye icon toggle button
- All `AwInput` props and features

## Usage

### Basic Example

```markup
<AwPassword v-model="password" label="Password" />
```

### With Validation

```markup
<AwPassword
    v-model="password"
    label="Password"
    :rules="[required, minLength(8)]"
/>
```

### With Placeholder

```markup
<AwPassword
    v-model="password"
    placeholder="Enter your password"
/>
```

## API

### Props

All props from `AwInput` are supported (inherited via `$attrs` and `$props`).

Common props:
- `value` / `v-model` - Password value
- `label` - Input label
- `placeholder` - Placeholder text
- `disabled` - Disable input
- `readonly` - Readonly input
- `error` - Error message
- `rules` - Validation rules

### Slots

All slots from `AwInput` are supported:
- `default` - Input content
- `icon` - Icon slot (used for show/hide button)
- `prefix` - Prefix content
- `postfix` - Postfix content

### Events

All events from `AwInput` are supported, plus:

| Name | Payload | Description |
|------|---------|-------------|
| input | `String` | Emitted when password value changes |

### Mixins

- `TextFieldMixin` - Provides text field functionality

## Related Components

- `AwInput` - Base input component used internally
- `AwButton` - Button component for toggle
- `AwIconSystemMono` - Icon components for eye icons

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Password is hidden by default (`type="password"`)
- Toggle button switches between `password` and `text` types
- Eye icon shows when password is hidden, eye-no icon when visible
- Spaces are prevented in password input (keydown handler)
- Paste events are handled to trim whitespace
- Component uses text field mixin for standard field behavior
- Toggle button is positioned in icon slot
- Icon transition uses `fade-from-bottom` animation
- Paste handling preserves cursor position