Valid States

Show positive feedback when a field passes validation. Valid states work as the inverse of error states using else-* attributes.

How It Works

Valid states use the same if-error container with else-* attributes:

<div if-error="email">
    <span then-show>Error message</span>
    <span else-text>Valid!</span>
</div>

Or use input shorthand attributes directly:

<input name="email" valid-class="border-green-500" />

---

Input Shorthand Attributes

Apply styles directly to inputs when they pass validation:

valid-class

<input name="email"
    sf-validate:email
    error-class="border-red-500"
    valid-class="border-green-500" />

valid-style

<input name="email"
    sf-validate:email
    valid-style="border-color: green" />

---

Container Else Attributes

For elements other than the input itself, use else-* inside an if-error container:

else-class

<div if-error="email" else-class="text-green-500">
    <span then-text>Error message</span>
    <span>Valid!</span>
</div>

else-text

Show text when field is valid:

<div if-error="email">
    <span then-show then-text style="display:none"></span>
    <span else-text>Email looks good!</span>
</div>

else-style

<div if-error="email" else-style="border-color: green">
    ...
</div>

---

Complete Example

<snip-form key="YOUR_KEY">
    <form>
        <div class="field">
            <label>Email</label>
            <input name="email"
                sf-validate:required
                sf-validate:email
                error-class="border-red-500 bg-red-50"
                valid-class="border-green-500 bg-green-50" />

            <div if-error="email" class="mt-1 text-sm">
                <span then-show then-text class="text-red-500" style="display:none"></span>
                <span else-text class="text-green-500">Valid email address</span>
            </div>
        </div>

        <button type="submit">Submit</button>
    </form>
</snip-form>

---

Visual Feedback Pattern

Common pattern with icons:

<div class="relative">
    <input name="email"
        sf-validate:required
        sf-validate:email
        class="pr-10"
        error-class="border-red-500"
        valid-class="border-green-500" />

    <div if-error="email" class="absolute right-3 top-3">
        <span then-show class="text-red-500" style="display:none">✕</span>
        <span else-class="text-green-500">✓</span>
    </div>
</div>

---

Attribute Reference

Input Attributes

Attribute	Value	Description
valid-class	CSS classes	Add classes when field valid
valid-style	CSS	Add inline styles when field valid

Container Attributes (inside if-error)

Attribute	Value	Description
else-class	CSS classes	Add classes when no error
else-text	text (optional)	Inject text when no error
else-style	CSS	Add inline styles when no error