# Initial Focus

The Dialog provides the ability to specify which element receives focus when the Dialog opens.

By default, the Dialog focuses the primary action button when it opens. If none is available, it focuses the Dialog wrapper. To focus a specific element instead, set the [`autoFocusedElement`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/dialogcomponent#autofocusedelement) property to a CSS selector that matches an element inside the Dialog.

The following example focuses the first input element instead of the default primary button.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/dialog/initial-focus/auto-focus/source.txt)

## Setting Initial Focus with Services

When you open a Dialog through the [`DialogService`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/dialogservice) to create Dialog instances dynamically based on user interaction, set [`autoFocusedElement`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/dialogsettings#autofocusedelement) in the [`DialogSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/dialogsettings) object. The selector must match an element inside the Dialog content.

The following snippet opens a content component and focuses the element that matches `#name`.

```ts
constructor(private dialogService: DialogService) {}

public openDialogForm(): void {
    const dialogRef = this.dialogService.open({
      content: UserInfoComponent,
      autoFocusedElement: '#name',
      // You can add other DialogSettings options, such as title or actions.
    });
}
```

The following example demonstrates setting the initial focus when opening the Dialog through the service.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/dialog/initial-focus/service/source.txt)

## Suggested Links

* [API Reference of the Dialog](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/dialogcomponent)