Text Field
- Usage
- Styling
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component.
- 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"]