# Tel
Use `ui-tel` for customer contact fields, support callbacks, escalation paths, and any workflow that captures phone numbers. It inherits the shared field API for labels, help text, size, variant, readonly, disabled, and validation messaging while using telephone-friendly input semantics.
## Import
```ts
import { TelComponent } from 'ui';
```
## Basic telephone fields
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TelComponent } from 'ui';
@Component({
selector: 'app-tel-basic-demo',
standalone: true,
imports: [FormsModule, TelComponent],
template: `
Primary contact number
Good default for account, customer, or workspace contact details.
Editable current number
Shows the built-in clear action when a value is already present.
`,
})
export class TelLayoutDemoComponent {}
```
## Readonly, disabled, and inline error states
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TelComponent } from 'ui';
@Component({
selector: 'app-tel-states-demo',
standalone: true,
imports: [FormsModule, TelComponent],
template: `
`,
})
export class TelStatesDemoComponent {
protected readonlyNumber = '+1 (555) 830-2040';
protected draftNumber = '12';
protected get draftError(): string {
const normalized = this.draftNumber.replace(/[^\d+]/g, '');
if (!normalized.length) {
return '';
}
return normalized.length < 7 ? 'Enter a longer phone number.' : '';
}
}
```
## Validation with reactive forms
```ts
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { ButtonComponent, TelComponent } from 'ui';
@Component({
selector: 'app-tel-validation-demo',
standalone: true,
imports: [ButtonComponent, ReactiveFormsModule, TelComponent],
template: `
`,
})
export class TelValidationDemoComponent {
protected readonly phoneForm = new FormGroup({
phone: new FormControl('', {
nonNullable: true,
validators: [Validators.required, Validators.minLength(7)],
}),
});
protected get phoneError(): string {
const control = this.phoneForm.controls.phone;
if (!control.touched && !control.dirty) {
return '';
}
if (control.hasError('required')) {
return 'Phone number is required.';
}
if (control.hasError('minlength')) {
return 'Enter at least 7 characters.';
}
return '';
}
protected markTouched(): void {
this.phoneForm.markAllAsTouched();
}
protected fillExample(): void {
this.phoneForm.controls.phone.setValue('+48 600 700 800');
this.phoneForm.controls.phone.markAsTouched();
}
}
```
## Contact routing form
```ts
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ButtonComponent, TelComponent } from 'ui';
@Component({
selector: 'app-tel-contact-form-demo',
standalone: true,
imports: [ButtonComponent, ReactiveFormsModule, TelComponent],
template: `
`,
})
export class TelContactFormDemoComponent {
protected readonly defaults = {
primary: '+48 600 700 800',
escalation: '+48 500 400 300',
afterHours: '',
};
protected readonly contactForm = new FormGroup({
primary: new FormControl(this.defaults.primary, { nonNullable: true }),
escalation: new FormControl(this.defaults.escalation, { nonNullable: true }),
afterHours: new FormControl(this.defaults.afterHours, { nonNullable: true }),
});
protected reset(): void {
this.contactForm.reset(this.defaults);
}
}
```
## Callback request panel
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ButtonComponent, TelComponent } from 'ui';
@Component({
selector: 'app-tel-support-panel-demo',
standalone: true,
imports: [ButtonComponent, FormsModule, TelComponent],
template: `
Callback request panel
A stronger end-to-end example: collect the preferred callback number, show service window
context, and keep the next action nearby.
Request callbackUse account number
`,
})
export class TelSupportPanelDemoComponent {
protected callbackNumber = '+44 20 7946 0958';
}
```
## Accessibility
### Label and name
Prefer a visible `label` so the phone number's purpose is explicit, especially when multiple contact fields appear together. Help and error text contribute through `aria-describedby`.
### Native telephone semantics
The inner input uses native `type="tel"`, which helps mobile browsers show phone-friendly keyboards and aligns the field with browser autofill expectations. When `autocomplete` is omitted, the inner input falls back to `tel`.
### Keyboard and actions
This is a standard text-entry field backed by a native telephone input. Clear and call affordances are exposed in the field chrome when the field is editable.
| Aspect | Behavior |
| --- | --- |
| focus | native tel input receives focus |
| typing | native tel input behavior |
| clear action | appears only when the field has a value and is editable |
| call action | stays visible while editable to reinforce the contact purpose |
| readonly / disabled | actions are hidden and direct editing is blocked |