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

# AwCode

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

The `AwCode` component is a multi-field code input component designed for entering verification codes, PINs, or other structured numeric codes. It displays multiple input fields based on a pattern and handles automatic focus management.

## Overview

`AwCode` provides a code input solution with:
- Pattern-based field layout (e.g., `'XXXX-XX'`)
- Automatic focus navigation between fields
- Paste support for complete codes
- Error handling and validation
- Compact mode for smaller displays
- Numeric input only
- Auto-advance on input

## Usage

### Basic Example

```markup
<AwCode pattern="XXXXXX" v-model="code" />
```

### With Separator

```markup
<AwCode pattern="XXXX-XX" v-model="code" />
```

### Compact Mode

```markup
<AwCode pattern="XXXXXX" v-model="code" compact />
```

### With Error

```markup
<AwCode 
    pattern="XXXXXX" 
    v-model="code"
    :error="codeError"
/>
```

### With Validation

```markup
<AwCode 
    pattern="XXXXXX" 
    v-model="code"
    @change="validateCode"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| pattern | Pattern string (X = input field, - = separator) | `String` | `false` | `'XXXXXX'` |
| compact | Enable compact mode (smaller fields) | `Boolean` | `false` | `true` |
| className | Custom CSS class | `String` | `false` | `'aw-text-field'` |
| value | Input value (v-model) | `String` | `false` | `''` |
| disabled | Disable all fields | `Boolean` | `false` | `false` |
| error | Error message to display | `String` | `false` | `''` |

**Pattern Format:**
- `X` = Input field (numeric)
- `-` = Separator (displayed as dash, not input)
- Example: `'XXXX-XX'` creates 4 fields, dash, 2 fields

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| error | Custom error display | - | Default error tooltip |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| input | `String` | Emitted on each field input (clean value without separators) |
| change | `String` | Emitted when all fields are filled (complete code) |
| focus | `Event` | Emitted when component receives focus |
| invalid | `Event` | Emitted on validation error |

### Config Options

The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:

```javascript
export default {
  AwCode: {
    baseClass: 'aw-text-field',
    pattern: 'XXXXXX',
    compact: true
  }
}
```

## Related Components

- `AwInput` - Single input field component
- `AwPassword` - Password input component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Only numeric input is accepted (digits 0-9)
- Separators (`-`) in pattern are displayed but not included in value
- Automatic focus moves to next field when current field is filled
- Paste support: paste complete code to fill all fields at once
- Backspace moves focus to previous field
- Arrow keys navigate between fields
- Error is displayed as tooltip on hover
- Uses `inputmode="numeric"` for mobile keyboard optimization
- Value is always clean (no separators) - pattern is only for display
- Component emits `change` only when all fields are complete
- Uses field mixin for standard field behavior
- Uses error mixin for error handling