Documentation

Documentation versions (currently viewingVaadin 24)

Email Field

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.

Root element

vaadin-email-field

States

Required

vaadin-email-field[required]

Focused

vaadin-email-field[focused]

Keyboard focused

vaadin-email-field[focus-ring]

Read-only

vaadin-email-field[readonly]

Disabled

vaadin-email-field[disabled]

Not empty

vaadin-email-field[has-value]

Hovered

vaadin-email-field:hover

Field

Field surface (background, border)

vaadin-email-field::part(input-field)

Native input element

vaadin-email-field > input

Input field with placeholder shown

vaadin-email-field > input:placeholder-shown

Clear button

vaadin-email-field::part(clear-button)

Clear button icon

vaadin-email-field::part(clear-button)::before

Prefix element

vaadin-email-field > [slot="prefix"]

Suffix element

vaadin-email-field > [slot="suffix"]

Label

Field with label

vaadin-email-field[has-label]

Label

vaadin-email-field::part(label)

Label text

vaadin-email-field > label

Required indicator

vaadin-email-field::part(required-indicator)

Helper and Validation Error

Field with helper

vaadin-email-field[has-helper]

Helper

vaadin-email-field::part(helper-text)

Helper text

vaadin-email-field > [slot="helper"]

Invalid field

vaadin-email-field[invalid]

Error message

vaadin-email-field::part(error-message)

Error message text

vaadin-email-field > [slot="error-message"]