---
title: LoginOverlay
description: LoginOverlay
element: vaadin-login-overlay
---

## Description

`<vaadin-login-overlay>` is a web component which renders a login form in an overlay and
provides an additional `brand` part for application title and description.

```html
<vaadin-login-overlay opened></vaadin-login-overlay>
```

### Styling

The following shadow DOM parts are available for styling:

Part name                    | Description
-----------------------------|--------------------------------
`backdrop`                   | Backdrop of the overlay
`overlay`                    | The overlay container element
`content`                    | The overlay content element
`card`                       | Container for the brand and form wrapper
`brand`                      | Container for application title and description
`description`                | The application description
`form-wrapper`               | The login form wrapper element
`form`                       | The login form element
`form-title`                 | Title of the login form
`error-message`              | Container for error message
`error-message-title`        | Container for error message title
`error-message-description`  | Container for error message description
`footer`                     | Container for the footer element

The following custom CSS properties are available for styling:

Custom CSS property                                |
:--------------------------------------------------|
| `--vaadin-login-overlay-background`              |
| `--vaadin-login-overlay-border-color`            |
| `--vaadin-login-overlay-border-radius`           |
| `--vaadin-login-overlay-border-width`            |
| `--vaadin-login-overlay-brand-background`        |
| `--vaadin-login-overlay-brand-padding`           |
| `--vaadin-login-overlay-description-color`       |
| `--vaadin-login-overlay-description-font-size`   |
| `--vaadin-login-overlay-description-font-weight` |
| `--vaadin-login-overlay-description-line-height` |
| `--vaadin-login-overlay-title-color`             |
| `--vaadin-login-overlay-title-font-size`         |
| `--vaadin-login-overlay-title-font-weight`       |
| `--vaadin-login-overlay-title-line-height`       |

See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

## Properties

### action

**Type:** `string | null`

If set, a synchronous POST call will be fired to the path defined.
The `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.

### description

**Type:** `string`

Defines the application description

### disabled

**Type:** `boolean`

If set, disable the "Log in" button and prevent user from submitting login form.
It is re-enabled automatically, when error is set to true, allowing form resubmission
after user makes changes.

### error

**Type:** `boolean`

If set, the error message is shown. The message is hidden by default.
When set, it changes the disabled state of the submit button.

### headingLevel

**Type:** `number`

Sets the root heading level (`aria-level`) for the heading hierarchy. Default value: 1.
Child headings automatically increment from this base level i.e. standalone login form
renders its title as `<h1>`, whereas the form in the overlay uses `<h2>`, as the `<h1>`
element is used by the overlay's own title.

### i18n

**Type:** `LoginI18n`

The object used to localize this component. To change the default
localization, replace this with an object that provides all properties, or
just the individual properties you want to change.

The object has the following JSON structure (by default it doesn't include `additionalInformation`
and `header` sections, `header` can be added to override `title` and `description` properties
in `vaadin-login-overlay`):

```js
{
  header: {
    title: 'App name',
    description: 'Inspiring application description'
  },
  form: {
    title: 'Log in',
    username: 'Username',
    password: 'Password',
    submit: 'Log in',
    forgotPassword: 'Forgot password'
  },
  errorMessage: {
    title: 'Incorrect username or password',
    message: 'Check that you have entered the correct username and password and try again.',
    username: 'Username is required',
    password: 'Password is required'
  },
  additionalInformation: 'In case you need to provide some additional info for the user.'
}
```

See also: [LoginI18n](#logini18n)

### noAutofocus

**Type:** `boolean`

If set, the user name field automatically receives focus when the component is attached to the document.

### noForgotPassword

**Type:** `boolean`

Whether to hide the forgot password button. The button is visible by default.

### opened

**Type:** `boolean`

True if the overlay is currently displayed.

### title

**Type:** `string`

Defines the application title

## Methods

### submit

**Type:** `() => void`

Submits the form.

## Events

### closed

**Type:** [LoginOverlayClosedEvent](#loginoverlayclosedevent)

Fired when the overlay is closed.

### description-changed

**Type:** [LoginOverlayDescriptionChangedEvent](#loginoverlaydescriptionchangedevent)

Fired when the `description` property changes.

### disabled-changed

**Type:** [LoginOverlayDisabledChangedEvent](#loginoverlaydisabledchangedevent)

Fired when the `disabled` property changes.

### error-changed

**Type:** [LoginOverlayErrorChangedEvent](#loginoverlayerrorchangedevent)

Fired when the `error` property changes.

### forgot-password

**Type:** `CustomEvent`

Fired when user clicks on the "Forgot password" button.

### login

**Type:** [LoginOverlayLoginEvent](#loginoverlayloginevent)

Fired when an user submits the login.
The event contains `username` and `password` values in the `detail` property.

## Types

### LoginI18n

```ts
export interface LoginI18n {
  form?: {
    title?: string;
    username?: string;
    password?: string;
    submit?: string;
    forgotPassword?: string;
  };
  errorMessage?: {
    title?: string;
    message?: string;
    username?: string;
    password?: string;
  };
  header?: {
    title?: string;
    description?: string;
  };
  additionalInformation?: string;
}
```

### LoginOverlayClosedEvent

```ts
/**
 * Fired when the overlay is closed.
 */
export type LoginOverlayClosedEvent = CustomEvent;
```

### LoginOverlayDescriptionChangedEvent

```ts
/**
 * Fired when the `description` property changes.
 */
export type LoginOverlayDescriptionChangedEvent = CustomEvent<{ value: string }>;
```

### LoginOverlayDisabledChangedEvent

```ts
/**
 * Fired when the `disabled` property changes.
 */
export type LoginOverlayDisabledChangedEvent = CustomEvent<{ value: boolean }>;
```

### LoginOverlayErrorChangedEvent

```ts
/**
 * Fired when the `error` property changes.
 */
export type LoginOverlayErrorChangedEvent = CustomEvent<{ value: boolean }>;
```

### LoginOverlayLoginEvent

```ts
/**
 * Fired when a user submits the login.
 */
export type LoginOverlayLoginEvent = CustomEvent<{
  username: string;
  password: string;
  custom?: Record<string, unknown>;
}>;
```