Building with AI?
llms.txt
← Back to Examples

Error & Valid States

Style elements based on error and valid states using the if-error / then-* / else-* pattern.

Live Demo

Submit the form to see error and valid states in action.

Example 1: Error hides when valid (else-hide)
Example 2: Toggle error/valid text
Example 3: Helper stays visible (no else-* directives)
3-20 characters, letters and numbers only

Source Code

Key Concepts

The if-error / then / else Pattern

Error state directives follow a conditional pattern:

  • if-error="field" - Targets a specific field
  • then-* - Applied when there's an error
  • else-* - Applied when field is valid (after submit)

Error State (then-*)

  • then-show - Show element on error
  • then-show-text - Show and inject error message
  • then-hide - Hide element on error
  • then-class="..." - Apply classes on error
  • then-text="..." - Set specific text on error
  • then-style="..." - Apply inline styles on error

Valid State (else-*)

  • else-hide - Hide element when valid
  • else-class="..." - Apply classes when valid
  • else-text="..." - Set text when valid
  • else-style="..." - Apply inline styles when valid

Input Convenience Directives

Apply directly to input elements:

  • error-class="..." - Classes on error
  • error-style="..." - Styles on error
  • valid-class="..." - Classes when valid
  • valid-style="..." - Styles when valid

Important: Elements without else-* directives stay in their base state when valid. Use else-hide to explicitly hide on valid.

Documentation Reference