Docs

Documentation versions (currently viewingVaadin 24)

Custom Field

Styling API reference for the Custom Field 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.

Root element

vaadin-custom-field

States

Required

vaadin-custom-field[required]

Focused

vaadin-custom-field[focused]

Keyboard focused

vaadin-custom-field[focus-ring]

Read-only

vaadin-custom-field[readonly]

Disabled

vaadin-custom-field[disabled]

Not empty

vaadin-custom-field[has-value]

Hovered

vaadin-custom-field:hover

Contents

Field contents

vaadin-custom-field > your-element-here

Field elements wrapper

vaadin-custom-field::part(input-fields)

Label

Field with label

vaadin-custom-field[has-label]

Label

vaadin-custom-field::part(label)

Label text

vaadin-custom-field > label

Required indicator

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

Helper and Validation Error

Field with helper

vaadin-custom-field[has-helper]

Helper

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

Helper text

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

Invalid field

vaadin-custom-field[invalid]

Error message

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

Error message text

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