Documentation

Documentation versions (currently viewingVaadin 24)

Text Field

Styling API reference for the Text Field component.

Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the html {…​} selector. See Lumo Style Properties for more information on style properties.

Note
Input Field Components Shared Styles
Style properties whose names start with --vaadin-input-field are shared among all input field components. To apply them only to a specific type of component, use an element selector like vaadin-text-field {…​}

Field Surface

Feature Property Default Value

Background

--vaadin-input-field-background

--lumo-contrast-10pct

Background, invalid

--vaadin-input-field-invalid-background

--lumo-error-color-10pct

Background, hover highlight color

--vaadin-input-field-hover-highlight

--lumo-contrast-50pct

Background, invalid hover highlight color

--vaadin-input-field-invalid-hover-highlight

--lumo-error-color-50pct

Border width

--vaadin-input-field-border-width

0

Border color

--vaadin-input-field-border-color

--lumo-contrast-50pct

Hover highlight opacity

--vaadin-input-field-hover-highlight-opacity

0.1

Height

--vaadin-input-field-height

--lumo-size-m

Value text color

--vaadin-input-field-value-color

--lumo-body-text-color

Value font size

--vaadin-input-field-value-font-size

--lumo-font-size-m

Value font weight

--vaadin-input-field-value-font-weight

400

Placeholder text color

--vaadin-input-field-placeholder-color

--lumo-secondary-text-color

Border radius

--vaadin-input-field-border-radius

--lumo-border-radius-m

Read-only border

--vaadin-input-field-readonly-border

1px dashed --lumo-contrast-30pct

Label

Feature Property Default Value

Color

--vaadin-input-field-label-color

--lumo-secondary-text-color

Focused color

--vaadin-input-field-focused-label-color

--lumo-primary-text-color

Hovered color

--vaadin-input-field-hovered-label-color

--lumo-body-text-color

Font size

--vaadin-input-field-label-font-size

--lumo-font-size-s

Font weight

--vaadin-input-field-label-font-weight

500

Helper

Feature Property Default Value

Font size

--vaadin-input-field-helper-font-size

--lumo-font-size-xs

Font weight

--vaadin-input-field-helper-font-weight

400

Color

--vaadin-input-field-helper-color

--lumo-secondary-text-color

Top margin

--vaadin-input-field-helper-spacing

0.4em

Error Message

Feature Property Default Value

Font size

--vaadin-input-field-error-font-size

--lumo-font-size-xs

Font weight

--vaadin-input-field-error-font-weight

400

Color

--vaadin-input-field-error-color

--lumo-error-text-color

Icons

Feature Property Default Value

Font size

--vaadin-input-field-icon-font-size

--lumo-icon-size-m

Color

--vaadin-input-field-icon-color

--lumo-contrast-60pct

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-text-field

States

Required

vaadin-text-field[required]

Focused

vaadin-text-field[focused]

Keyboard focused

vaadin-text-field[focus-ring]

Read-only

vaadin-text-field[readonly]

Disabled

vaadin-text-field[disabled]

Not empty

vaadin-text-field[has-value]

Hovered

vaadin-text-field:hover

Field

Field surface (background, border)

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

Native input element

vaadin-text-field > input

Input field with placeholder shown

vaadin-text-field > input:placeholder-shown

Clear button

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

Clear button icon

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

Prefix element

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

Suffix element

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

Label

Field with label

vaadin-text-field[has-label]

Label

vaadin-text-field::part(label)

Label text

vaadin-text-field > label

Required indicator

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

Helper and Validation Error

Field with helper

vaadin-text-field[has-helper]

Helper

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

Helper text

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

Invalid field

vaadin-text-field[invalid]

Error message

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

Error message text

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