# URL
Use `ui-url` for website fields, profile links, source references, support pages, and any workflow that captures navigable destinations. It inherits the shared field API for labels, help text, size, variant, readonly, disabled, and validation messaging while using URL-friendly input semantics.
## Import
```ts
import { UrlComponent } from 'ui';
```
## Basic URL fields
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { UrlComponent } from 'ui';
@Component({
selector: 'app-url-basic-demo',
standalone: true,
imports: [FormsModule, UrlComponent],
template: `
Primary website
Good default for organization, product, or profile links.
Editable existing link
Shows the built-in clear action when a URL is already present.
`,
})
export class UrlBasicDemoComponent {
protected docsUrl = 'https://docs.example.com/guides/getting-started';
}
```
## Layout, size, and variant
```ts
import { Component } from '@angular/core';
import { UrlComponent } from 'ui';
@Component({
selector: 'app-url-layout-demo',
standalone: true,
imports: [UrlComponent],
template: `
Prominent published link
`,
})
export class UrlLayoutDemoComponent {}
```
## Readonly, disabled, and inline error states
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { UrlComponent } from 'ui';
@Component({
selector: 'app-url-states-demo',
standalone: true,
imports: [FormsModule, UrlComponent],
template: `
`,
})
export class UrlStatesDemoComponent {
protected readonlyUrl = 'https://contoso.com/support/status';
protected draftUrl = 'example';
protected get draftError(): string {
if (!this.draftUrl) {
return '';
}
return /^https?:\/\//i.test(this.draftUrl) ? '' : 'Include http:// or https://.';
}
}
```
## Validation with reactive forms
```ts
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { ButtonComponent, UrlComponent } from 'ui';
@Component({
selector: 'app-url-validation-demo',
standalone: true,
imports: [ButtonComponent, ReactiveFormsModule, UrlComponent],
template: `
`,
})
export class UrlValidationDemoComponent {
protected readonly linkForm = new FormGroup({
sourceUrl: new FormControl('', {
nonNullable: true,
validators: [Validators.required],
}),
});
protected get sourceError(): string {
const control = this.linkForm.controls.sourceUrl;
if (!control.touched && !control.dirty) {
return '';
}
if (control.hasError('required')) {
return 'URL is required.';
}
if (control.value && !/^https?:\/\//i.test(control.value)) {
return 'Use a full URL starting with http:// or https://.';
}
return '';
}
protected markTouched(): void {
this.linkForm.markAllAsTouched();
}
protected fillExample(): void {
this.linkForm.controls.sourceUrl.setValue('https://www.figma.com/file/abc123/project-system');
this.linkForm.controls.sourceUrl.markAsTouched();
}
}
```
## Profile links form
```ts
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ButtonComponent, UrlComponent } from 'ui';
@Component({
selector: 'app-url-profile-form-demo',
standalone: true,
imports: [ButtonComponent, ReactiveFormsModule, UrlComponent],
template: `
`,
})
export class UrlProfileFormDemoComponent {
protected readonly defaults = {
website: 'https://contoso.com',
github: 'https://github.com/contoso/design-system',
support: 'https://contoso.com/support',
};
protected readonly profileForm = new FormGroup({
website: new FormControl(this.defaults.website, { nonNullable: true }),
github: new FormControl(this.defaults.github, { nonNullable: true }),
support: new FormControl(this.defaults.support, { nonNullable: true }),
});
protected reset(): void {
this.profileForm.reset(this.defaults);
}
}
```
## Share destination panel
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ButtonComponent, UrlComponent } from 'ui';
@Component({
selector: 'app-url-link-panel-demo',
standalone: true,
imports: [ButtonComponent, FormsModule, UrlComponent],
template: `
Share destination panel
A realistic URL surface combines the destination field, context about where the link will
be used, and immediate next-step actions.
Save link
Clear
`,
})
export class UrlLinkPanelDemoComponent {
protected destinationUrl = 'https://launch.example.com/2026/spring';
}
```
## Accessibility
### Label and name
Prefer a visible `label` so the link purpose is explicit, especially when several URL fields appear together. Help and error text contribute through `aria-describedby`.
### Native URL semantics
The inner input uses native `type="url"`, which helps browsers apply URL-specific validation heuristics and aligns the field with browser autofill expectations. When `autocomplete` is omitted, the inner input falls back to `url`.
### Keyboard and actions
This is a standard text-entry field backed by a native URL input. Clear and link affordances are exposed in the field chrome when the field is editable.
| Aspect | Behavior |
| --- | --- |
| focus | native url input receives focus |
| typing | native url input behavior |
| clear action | appears only when the field has a value and is editable |
| link action | stays visible while editable to reinforce the destination purpose |
| readonly / disabled | actions are hidden and direct editing is blocked |