Building with AI?
llms.txt
Full Example
A comprehensive example combining validation, error/valid states, submit states, and custom success content.
Live Demo
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-textfor 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.