Form Field

FieldComponent (state: default/focus/error/disabled, hint: string, required: bool)

Default, focus, disabled

Sale name Shown to customers on the storefront. Slug * Locked once the sale has gone live at least once.

Error

class="field is-error": the input border and a .field__error message swap in together, replacing .field__hint for the duration of the error. Never shown at the same time as the hint.

Refund amount * Cannot exceed the line item's price of $49.00. Reason for waiving fee * This field is required when waiving a fee.

Table-cell input error (bare `.input`, no `.field` wrapper)

Same .is-error border treatment applies directly to a bare .input for compact table-cell fields (refund amount, price-drop row) that don't have room for a full label/hint stack; pair with a tooltip or an adjacent inline message.

Usage guidance

Validate inline, next to the field it concerns, the moment a value is known to be invalid — not only on submit. A field's error message replaces its hint; never show both. For a failure that isn't tied to one field (a network error, a server-side rejection), see Flash instead of inventing a form-level variant here. For the submitting-in-progress state on the button itself, see Button's Loading demo.

Form Field

Default, focus, disabled

Error

Table-cell input error (bare .input, no .field wrapper)

Usage guidance

Table-cell input error (bare `.input`, no `.field` wrapper)