Docs

Documentation versions (currently viewingVaadin 25 (prerelease))

Login Styling

Styling API reference for the Login component.

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Login Form

Root component

vaadin-login-form

Inner form wrapper

vaadin-login-form::part(form)

Form title

vaadin-login-form::part(form-title)

Error message section

vaadin-login-form::part(error-message)

Error message heading

vaadin-login-form::part(error-message-title)

Error message description

vaadin-login-form::part(error-message-description)

Footer

vaadin-login-form::part(footer)

Login Form Fields and Buttons

Username field

vaadin-login-form vaadin-text-field

Password field

vaadin-login-form vaadin-password-field

Log In button

vaadin-login-form [slot="submit"]

Forgot Password button

vaadin-login-form [slot="forgot-password"]

Login Overlay

Root component

vaadin-login-overlay

Overlay backdrop / modality curtain

vaadin-login-overlay::part(backdrop)

Outer content wrapper

vaadin-login-overlay::part(overlay)

Inner content wrapper

vaadin-login-overlay::part(content)

Overlay card

vaadin-login-overlay::part(card)

Card header

vaadin-login-overlay::part(brand)

Title

vaadin-login-overlay [slot="title"]

Description / sub-title

vaadin-login-overlay::part(description)

Title

vaadin-login-overlay [slot="title"]

Form wrapper

vaadin-login-overlay::part(form-wrapper)

Inner form wrapper

vaadin-login-overlay::part(form)

Form title

vaadin-login-overlay::part(form-title)

Error message section

vaadin-login-overlay::part(error-message)

Error message heading

vaadin-login-overlay::part(error-message-title)

Error message description

vaadin-login-overlay::part(error-message-description)

Footer

vaadin-login-overlay::part(footer)

Login Overlay Fields and Buttons

Username field

vaadin-login-overlay vaadin-text-field

Password field

vaadin-login-overlay vaadin-password-field

Log In button

vaadin-login-overlay [slot="submit"]

Forgot Password button

vaadin-login-overlay [slot="forgot-password"]