Docs

Documentation versions (currently viewingVaadin 24)

Login

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

Login form

vaadin-login-form-wrapper

Parts

Inner form wrapper

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

Form title

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

Error message section

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

Error message heading

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

Error message description

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

Footer

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

Login Overlay

Overlay element

vaadin-login-overlay-wrapper

Overlay backdrop / modality curtain

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

Outer content wrapper

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

Inner content wrapper

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

Overlay card

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

Card header

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

Title

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

Description / sub-title

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

Login form component in overlay

vaadin-login-overlay-wrapper > vaadin-login-form

Fields and Buttons

Username field

vaadin-login-form-wrapper vaadin-text-field

Password field

vaadin-login-form-wrapper vaadin-password-field

Log In button

vaadin-login-form vaadin-button[theme~="submit"]

Forgot Password button

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