Docs

Docs

Number Field Styling

Styling API reference for the Number Field component.

Style Variants

The following style variants can be applied:

Variant Description Supported by

align-left

Aligns the text to the left side of the field (default)

Aura, Lumo

align-center

Centers the text within the field

Lumo

align-right

Aligns the text to the right side of the field. Recommended for numerical values when presented in vertical groups.

Aura, Lumo

align-start

Aligns the text to the start side of the field, taking into account the current text direction (left for LTR, right for RTL)

Aura

align-end

Aligns the text to the end side of the field, taking into account the current text direction (right for LTR, left for RTL)

Aura

small

Renders a more compact field

Lumo

helper-above-field

Renders the helper above the field, and below the label

Aura, Lumo
Open in a
new tab
Source code
NumberFieldStyles.java
number-field-styles.tsx
number-field-styles.ts

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 Component 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

Common Properties

Property Supported by

--vaadin-input-field-background

Aura, Lumo

--vaadin-input-field-border-color

Aura, Lumo

--vaadin-input-field-border-radius

Aura, Lumo

--vaadin-input-field-border-width

Aura, Lumo

--vaadin-input-field-bottom-end-radius

Aura, Lumo

--vaadin-input-field-bottom-start-radius

Aura, Lumo

--vaadin-input-field-container-gap

Aura

--vaadin-input-field-height

Lumo

--vaadin-input-field-padding

Aura

--vaadin-input-field-placeholder-color

Aura, Lumo

--vaadin-input-field-top-start-radius

Aura, Lumo

--vaadin-input-field-top-end-radius

Aura, Lumo

--vaadin-input-field-value-color

Aura, Lumo

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

Aura, Lumo

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

Aura, Lumo

--vaadin-input-field-value-line-height

Aura, Lumo

Field States

Property Supported by

--vaadin-focus-ring-width

Aura, Lumo

--vaadin-focus-ring-color

Aura, Lumo

--vaadin-input-field-disabled-background

Aura, Lumo

--vaadin-input-field-disabled-value-color

Lumo

--vaadin-input-field-hover-highlight

Lumo

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

Lumo

--vaadin-input-field-invalid-background

Lumo

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

Lumo

--vaadin-input-field-readonly-border

Lumo

Label

Property Supported by

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

Lumo

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

Lumo

--vaadin-input-field-label-color

Aura, Lumo

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

Aura, Lumo

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

Aura, Lumo

--vaadin-input-field-label-line-height

Aura, Lumo

--vaadin-input-field-required-indicator-color

Aura, Lumo

--vaadin-input-field-required-indicator

Aura, Lumo

Helper

Property Supported by

--vaadin-input-field-helper-color

Aura, Lumo

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

Aura, Lumo

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

Aura, Lumo

--vaadin-input-field-helper-line-height

Aura, Lumo

--vaadin-input-field-helper-spacing

Lumo

Error Message

Property Supported by

--vaadin-input-field-error-color

Aura, Lumo

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

Aura, Lumo

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

Aura, Lumo

--vaadin-input-field-error-line-height

Aura, Lumo

Field Buttons

Property Supported by

--vaadin-clickable-cursor

Aura

--vaadin-disabled-cursor

Aura

--vaadin-icon-size

Aura

--vaadin-icon-visual-size

Aura

--vaadin-input-field-button-text-color

Aura

--vaadin-input-field-icon-size

Lumo

--vaadin-input-field-icon-color

Lumo

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

States

Required

vaadin-number-field[required]

Focused

vaadin-number-field[focused]

Keyboard focused

vaadin-number-field[focus-ring]

Read-only

vaadin-number-field[readonly]

Disabled

vaadin-number-field[disabled]

Not empty

vaadin-number-field[has-value]

Hovered

vaadin-number-field:hover

Field

Field surface (background, border)

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

Native input element

vaadin-number-field > input

Input field with placeholder shown

vaadin-number-field > input:placeholder-shown

Clear, decrease and increase buttons

vaadin-number-field::part(field-button)

Clear button

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

Clear button icon

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

Prefix element

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

Suffix element

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

Decrease button

vaadin-number-field::part(decrease-button)

Decrease button icon

vaadin-number-field::part(decrease-button)::before

Increase button

vaadin-number-field::part(increase-button)

Increase button icon

vaadin-number-field::part(increase-button)::before

Label

Field with label

vaadin-number-field[has-label]

Label

vaadin-number-field::part(label)

Label text

vaadin-number-field > label

Required indicator

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

Helper and Validation Error

Field with helper

vaadin-number-field[has-helper]

Helper

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

Helper text

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

Invalid field

vaadin-number-field[invalid]

Field with error message

vaadin-number-field[has-error-message]

Error message

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

Error message text

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