Smart Forms

vel-src: state-machine.css

CSS-only form validation using :has() with :valid and :invalid. Labels change color, error messages appear, and borders react — zero JavaScript required.

Class	Properties
vel-smart-form	Form container with CSS validation wired via :has()
vel-field	Field group (label + input + hint/error messages)
vel-field-label	Label that reacts to validity state
vel-field-input	Input with live validity border/ring feedback
vel-field-hint	Hint text (hidden when field is touched)
vel-field-error	Error message (shown when :invalid)
vel-field-ok	Success message (shown when :valid)
vel-form-submit	Submit button — auto-disabled (opacity 0.5, pointer-events none) when form has invalid inputs

Examples

Live validation — type in the fields to see CSS react

example.html

<form class="vel-smart-form" style="max-width:360px;display:grid;gap:1.25rem">
  <div class="vel-field">
    <label class="vel-field-label" for="sf-name">Full name</label>
    <input class="vel-field-input" type="text" id="sf-name" placeholder="Jane Smith" minlength="2" required />
    <span class="vel-field-hint">At least 2 characters</span>
    <span class="vel-field-error">Name must be at least 2 characters</span>
    <span class="vel-field-ok">Looks good!</span>
  </div>
  <div class="vel-field">
    <label class="vel-field-label" for="sf-email">Email address</label>
    <input class="vel-field-input" type="email" id="sf-email" placeholder="jane@example.com" required />
    <span class="vel-field-hint">We'll never share your email</span>
    <span class="vel-field-error">Enter a valid email address</span>
    <span class="vel-field-ok">Valid email!</span>
  </div>
  <button type="submit" class="vel-btn vel-btn-primary">Submit</button>
</form>

Required field — border turns red when left empty and touched

example.html

<form class="vel-smart-form" style="max-width:360px;display:grid;gap:1rem">
  <div class="vel-field">
    <label class="vel-field-label" for="sf-url">Website URL</label>
    <input class="vel-field-input" type="url" id="sf-url" placeholder="https://example.com" required />
    <span class="vel-field-hint">Include https://</span>
    <span class="vel-field-error">Enter a valid URL starting with https://</span>
    <span class="vel-field-ok">Valid URL!</span>
  </div>
</form>