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

# AwTel

**Category:** Molecule | **Import:** Dynamic

The `AwTel` component is a telephone number input field with country code selection, phone number validation, and international formatting. It uses libphonenumber-js for validation and formatting.

## Overview

`AwTel` provides a telephone input solution with:
- Country code selection dropdown
- Phone number validation
- International phone number formatting
- Country flag display
- Validity indicator
- libphonenumber-js integration

## Usage

### Basic Example

```markup
<AwTel v-model="phoneNumber" label="Phone Number" />
```

### With Default Country

```markup
<AwTel
    v-model="phoneNumber"
    label="Phone"
    default-country="US"
/>
```

### With Validation

```markup
<AwTel
    v-model="phoneNumber"
    label="Phone"
    :rules="[required]"
/>
```

## API

### Props

All props from `AwInput` are supported, plus:

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| value | Phone number value | `String` | `false` | `''` |
| defaultCountry | Default country ISO code | `String` | `false` | `null` |
| autocomplete | Input autocomplete attribute | `String` | `false` | `'tel'` |

**Common Input Props:**
- `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
- `prefix` - Prefix content (used for country selector)
- `postfix` - Postfix content (used for validity indicator)
- `element` - Custom input element

### Events

All events from `AwInput` are supported, plus:

| Name | Payload | Description |
|------|---------|-------------|
| input | `String` | Emitted when phone number changes |
| change:country | `String` | Emitted when country is selected (ISO code) |

### Mixins

- `arrowFocusMixin` - Provides keyboard navigation for country dropdown

### Config Options

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

```javascript
export default {
  AwTel: {
    baseClass: 'aw-tel',
    defaultCountry: 'US'
  }
}
```

## Related Components

- `AwInput` - Base input component used internally
- `AwDropdown` - Dropdown component for country selection
- `AwDropdownButton` - Dropdown button component
- `AwIconSystemMono` - Icon components for validity indicator

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as a molecule
- Uses libphonenumber-js for phone number parsing and validation
- Country dropdown shows all available countries with flags
- Country flag is displayed in prefix slot
- Validity indicator (check/ban icon) appears in postfix when value exists
- Phone number is automatically formatted based on selected country
- Component detects country from phone number if not specified
- Default country can be set via prop or config
- Country codes are displayed in dropdown (e.g., "+1" for US)
- Keyboard navigation supported in country dropdown
- Phone number validation uses libphonenumber-js validation
- Component handles international phone number formats
- Country selection updates phone number formatting