Design Systems

Veli v1.0.0 provides 3 built-in design systems for form styling and layout.

---

1. Classic Design

Traditional form layout with labels above inputs.

Activate:

<form data-veli-design="classic">
  <!-- fields -->
</form>

Structure:

<div class="veli-field-wrapper">
  <label>Field Label</label>
  <input type="text" name="fieldname" data-veli-rules="..." />
  <span class="veli-error"></span>
</div>

Features:

• Clean, minimal aesthetic
• Easy to scan vertically
• Great for accessibility
• Traditional form pattern

CSS Classes:

• .veli-field-wrapper - Container for each field
• .veli-error-field - Applied when validation fails
• .veli-success-field - Applied on successful validation
• .veli-error - Displays error message

Best For: Dashboards, traditional forms, admin panels

---

2. Floating Label Design

Modern SPA style where labels float above inputs on focus.

Activate:

<form data-veli-design="floating-label">
  <!-- fields -->
</form>

Structure:

<div class="veli-field-wrapper">
  <input type="text" name="fieldname" placeholder=" " data-veli-rules="..." />
  <label>Field Label</label>
  <span class="veli-error"></span>
</div>

Note:

• Label comes AFTER input in floating-label design.
• Input field should have a placeholder attribute set to space. placeholder=" "

Features:

• Modern, polished appearance
• Saves vertical space
• Smooth animations
• Great for mobile and SPA

CSS Classes:

• .veli-field-wrapper - Container
• .veli-field-wrapper.focused - Applied when field is focused
• .veli-field-wrapper.filled - Applied when field has content
• .veli-error-field - Applied on validation error
• .veli-success-field - Applied on successful validation

Best For: Modern SPAs, mobile apps, modern UX

---

3. IFTA Label Design

Accessible form design using fieldset and legend pattern.

Activate:

<form data-veli-design="ifta-label">
  <!-- fields -->
</form>

Structure:

<fieldset class="veli-field-wrapper">
  <legend>Field Label</legend>
  <input type="text" name="fieldname" data-veli-rules="..." />
  <span class="veli-error"></span>
</fieldset>

Features:

• Excellent accessibility
• ARIA compliant
• Semantic HTML structure
• Screen reader friendly

CSS Classes:

• fieldset.veli-field-wrapper - Field container
• legend - Field label
• .veli-error-field - Applied on validation error
• .veli-success-field - Applied on successful validation

Best For: Accessible forms, government sites, multilingual apps

---

Comparing Design Systems

Feature	Classic	Floating Label	IFTA Label
Label Position	Above input	Animates above	In legend
Space Efficiency	Good	Excellent	Good
Modern Feel	✓	✓✓	✓
Accessibility	✓✓	✓	✓✓✓
Mobile Friendly	✓	✓✓	✓
Traditional Look	✓✓	✗	✓

---

Using Multiple Designs

You can use different designs on the same page:

<!-- Classic form -->
<form data-veli-design="classic">...</form>

<!-- Floating label form -->
<form data-veli-design="floating-label">...</form>

<!-- IFTA label form -->
<form data-veli-design="ifta-label">...</form>

---

Customize Colors

All design systems support color customization:

import {VeliConfig} from "@gd3v/veli";

VeliConfig({
  colors: {
    error: "#d32f2f",
    success: "#388e3c",
    warning: "#f57c00",
    info: "#1976d2",
  },
});

These colors apply to:

• Error message text
• Success message text
• Field borders and backgrounds
• Icons and indicators

---

Responsive Design

All three design systems are fully responsive:

• Mobile: 320px+
• Tablet: 768px+
• Desktop: 1024px+

No additional configuration needed - just works!

---

Accessibility Features

Classic Design

• Semantic HTML structure
• Proper label associations
• High contrast support

Floating Label Design

• Clear focus states
• Visible labels when focused
• Keyboard navigation support

IFTA Label Design

• Fieldset/legend semantic pattern
• Built-in accessibility
• Screen reader friendly
• ARIA compliant

---

Switching Designs

To change designs, simply update the data-veli-design attribute:

<!-- Before -->
<form data-veli-design="classic">...</form>

<!-- After -->
<form data-veli-design="floating-label">...</form>

No JavaScript changes needed - everything adapts automatically!