Building with AI?
llms.txt
← Back to Examples

Full Example

A comprehensive example combining validation, error/valid states, submit states, and custom success content.

Live Demo

International format starting with +
🎉

Thank you %full_name%!

We'll respond to %email% shortly.

Source code

Features Demonstrated

Validation

  • sf-validate:required
  • sf-validate:email
  • sf-validate:starts_with[+]
  • sf-validate:min_length[10]
  • sf-validate:accepted

Error/Valid States

  • if-error then-show-text else-hide
  • then-class / else-class
  • else-text for valid message
  • error-class / valid-class

Submit States

  • on-submit-show
  • on-submit-class
  • on-submit-text
  • on-submit-style

Other

  • transition="750" - 750ms fade
  • <sf-success>
  • %field_name% interpolation

Note: The Mobile field helper text stays visible on valid (no else-* directives), while Email toggles between error and valid messages.

Documentation Reference