CSS classes the checkout enhancers add and remove. Style these to match your theme; do not rely on them as JavaScript hooks.
| Class | Meaning |
|---|
no-error | Field passed validation |
has-error | Field failed validation |
next-error-field | Field is in an error state |
next-valid-field | Field is valid |
next-neutral-field | Field has no validation state yet |
next-error | Error message element |
addErrorIcon | Show the error icon on the field |
addTick | Show the success checkmark on the field |
has-value | Field has a value (used for floating labels) |
| Class | Meaning |
|---|
next-processing | The form is submitting / calling the API |
next-loading | A section is loading |
| Class | Meaning |
|---|
next-location-hidden | The city/state/postal block is hidden until address1 is entered |
next-hidden | Generic hidden state |
| Class | Meaning |
|---|
billing-form-expanded | Billing form is fully open |
billing-form-collapsed | Billing form is fully closed |
| Class | Meaning |
|---|
next-selected | The selected payment method element |
payment-method__form--expanded | Payment form section is open |
payment-method__form--collapsed | Payment form section is closed |
payment-method__form--expanding | Payment form is animating open |
payment-method__form--collapsing | Payment form is animating closed |
| Class | Meaning |
|---|
next-cart-empty | Applied to express buttons when the cart is empty (disabled) |
| Class | Meaning |
|---|
next-review-empty | A review element whose value is empty (showing its fallback) |
