Featured Examples
Real-Time Validation
Demonstrates field validation, error messages, and form submission with input masking.
View ExampleDynamic Charts
Example using a charting library to render data dynamically with animations.
View ExampleTheme Switcher
Demonstration of responsive theme switching between light and dark modes.
View ExampleAPI Demo
Example of fetching and displaying data from a component API endpoint.
View ExampleCode Examples
Form Validation
<import>@eseniiaia/validation</import>
<form on-submit="validateForm">
<input
class="es-input"
id="email"
type="email"
required
pattern="\\b[A-Z0-9._%+-]+@([A-Z0-9-]+\\.)+[A-z]{2,64}\\b"
/>
<button type="submit" class="es-btn-primary">Submit</button>
<div id="error-message" class="error" hidden></div>
</form>
Theme Switcher
<script>
function toggleTheme() {
const isDark = document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
}
</script>
<button onclick="toggleTheme()" class="es-btn-link">Toggle Theme</button>