Component
Inline Form
Inline Form.
- Component
- Vanilla
- HTML
- MIT
Preview
Live component
No interactive preview for this component.
Install it with the CLI below, or read the implementation on this page.
Install
Add to your project
npx devsnips add Vanilla/Components/Forms/inline-form Vanilla/Components/Forms/inline-form <!--
Inline Form with Validation States
- Real-time validation feedback
- Accessible error messages
- Responsive layout
- Custom validation styles
- Mobile-optimized inputs
-->
<form class="inline-form" novalidate>
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
id="username"
name="username"
required
pattern="^[a-zA-Z0-9_]{3,20}$"
aria-describedby="username-error"
>
<div id="username-error" class="error-message" aria-live="polite"></div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
required
aria-describedby="email-error"
>
<div id="email-error" class="error-message" aria-live="polite"></div>
</div>
<div class="form-group">
<label for="age">Age</label>
<input
type="number"
id="age"
name="age"
min="18"
max="120"
required
aria-describedby="age-error"
>
<div id="age-error" class="error-message" aria-live="polite"></div>
</div>
<button type="submit" class="submit-button">Submit</button>
</form>
<style>
.inline-form {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: flex-start;
max-width: 800px;
margin: 2rem auto;
padding: 0 1rem;
}
.form-group {
flex: 1 1 200px;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
label {
font-weight: 500;
color: var(--ds-foreground, #333);
}
input {
padding: 0.5rem;
border: 2px solid var(--ds-border, #ddd);
border-radius: var(--ds-radius-sm, 4px);
font-size: 1rem;
transition: all 0.3s;
}
input:focus {
outline: none;
border-color: var(--ds-accent, #4a90e2);
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}
/* Validation styles */
input:not(:placeholder-shown):valid {
border-color: var(--ds-success, #4caf50);
}
input:not(:placeholder-shown):invalid {
border-color: var(--ds-danger, #f44336);
}
.error-message {
font-size: 0.875rem;
color: var(--ds-danger, #f44336);
min-height: 1.25rem;
}
.submit-button {
padding: 0.5rem 1.5rem;
border: none;
border-radius: var(--ds-radius-sm, 4px);
background: var(--ds-accent, #4a90e2);
color: white;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
align-self: flex-end;
}
.submit-button:hover {
background: var(--ds-accent, #357abd);
}
.submit-button:disabled {
background: var(--ds-border, #ddd);
cursor: not-allowed;
}
/* Focus styles */
input:focus-visible,
.submit-button:focus-visible {
outline: 2px solid var(--ds-accent, #4a90e2);
outline-offset: 2px;
}
/* Mobile optimization */
@media (max-width: 600px) {
.inline-form {
flex-direction: column;
}
.form-group {
width: 100%;
}
input {
padding: 0.75rem;
}
.submit-button {
width: 100%;
padding: 0.75rem;
}
}
/* devsnips-qa:quality-bar */
@media (prefers-reduced-motion: reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}}
/* DevSnips design tokens (Swiss) — edit tokens.css to re-theme */
:root{
--ds-bg:#fff;--ds-surface:#fff;--ds-surface-2:#f7f7f7;--ds-surface-3:#ededed;--ds-foreground:#0a0a0a;--ds-muted:#525252;--ds-subtle:#a3a3a3;--ds-border:#e5e5e5;--ds-border-strong:#d4d4d4;--ds-accent:#2563eb;--ds-accent-hover:#1d4ed8;--ds-accent-fg:#fff;--ds-accent-soft:#eff6ff;--ds-success:#16a34a;--ds-success-soft:#f0fdf4;--ds-warning:#d97706;--ds-warning-soft:#fffbeb;--ds-danger:#dc2626;--ds-danger-soft:#fef2f2;--ds-info:#2563eb;--ds-info-soft:#eff6ff;--ds-font-sans:system-ui,-apple-system,'Segoe UI',Roboto,Inter,'Helvetica Neue',Arial,sans-serif;--ds-font-mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;--ds-text-xs:.75rem;--ds-text-sm:.875rem;--ds-text-base:1rem;--ds-text-lg:1.125rem;--ds-text-xl:1.25rem;--ds-text-2xl:1.5rem;--ds-text-3xl:1.875rem;--ds-text-4xl:2.25rem;--ds-leading-tight:1.25;--ds-leading-normal:1.5;--ds-leading-relaxed:1.625;--ds-weight-normal:400;--ds-weight-medium:500;--ds-weight-semibold:600;--ds-weight-bold:700;--ds-space-0:0;--ds-space-px:1px;--ds-space-1:.25rem;--ds-space-2:.5rem;--ds-space-3:.75rem;--ds-space-4:1rem;--ds-space-5:1.25rem;--ds-space-6:1.5rem;--ds-space-8:2rem;--ds-space-10:2.5rem;--ds-space-12:3rem;--ds-space-16:4rem;--ds-radius-sm:.25rem;--ds-radius-md:.5rem;--ds-radius-lg:.75rem;--ds-radius-xl:1rem;--ds-radius-2xl:1.5rem;--ds-radius-full:9999px;--ds-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--ds-shadow-md:0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -2px rgba(0,0,0,.05);--ds-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.05);--ds-duration-fast:120ms;--ds-duration-normal:200ms;--ds-duration-slow:300ms;--ds-ease-out:cubic-bezier(.16,1,.3,1);--ds-ease-in-out:cubic-bezier(.4,0,.2,1);--ds-ring:0 0 0 2px #2563eb;--ds-container:1200px;--ds-gutter:1rem;
}
@media (prefers-color-scheme: dark){:root{--ds-bg:#0a0a0a;--ds-surface:#111;--ds-surface-2:#171717;--ds-surface-3:#1f1f1f;--ds-foreground:#fafafa;--ds-muted:#a3a3a3;--ds-subtle:#737373;--ds-border:#262626;--ds-border-strong:#404040;--ds-accent:#3b82f6;--ds-accent-hover:#60a5fa;--ds-accent-fg:#fff;--ds-accent-soft:#172554;--ds-success:#22c55e;--ds-success-soft:#052e16;--ds-warning:#f59e0b;--ds-warning-soft:#422006;--ds-danger:#ef4444;--ds-danger-soft:#450a0a;--ds-info:#3b82f6;--ds-info-soft:#172554;--ds-ring:0 0 0 2px #3b82f6;}}
</style>
<script>
const form = document.querySelector('.inline-form');
const inputs = form.querySelectorAll('input');
const submitButton = form.querySelector('.submit-button');
// Validation messages
const validationMessages = {
username: {
valueMissing: 'Username is required',
patternMismatch: 'Username must be 3-20 characters and can only contain letters, numbers, and underscores'
},
email: {
valueMissing: 'Email is required',
typeMismatch: 'Please enter a valid email address'
},
age: {
valueMissing: 'Age is required',
rangeUnderflow: 'You must be at least 18 years old',
rangeOverflow: 'Age cannot be more than 120',
stepMismatch: 'Please enter a valid age',
typeMismatch: 'Please enter a valid number'
}
};
// Real-time validation
inputs.forEach(input => {
input.addEventListener('input', validateInput);
input.addEventListener('blur', validateInput);
});
function validateInput(e) {
const input = e.target;
const errorElement = document.getElementById(`${input.id}-error`);
if (!input.validity.valid) {
let message = '';
for (const key in validationMessages[input.name]) {
if (input.validity[key]) {
message = validationMessages[input.name][key];
break;
}
}
errorElement.textContent = message;
input.setAttribute('aria-invalid', 'true');
} else {
errorElement.textContent = '';
input.setAttribute('aria-invalid', 'false');
}
// Update submit button state
submitButton.disabled = !form.checkValidity();
}
// Form submission
form.addEventListener('submit', (e) => {
e.preventDefault();
if (!form.checkValidity()) {
// Show validation messages for all fields
inputs.forEach(input => {
const event = new Event('blur');
input.dispatchEvent(event);
});
return;
}
// Handle successful submission
console.log('Form submitted successfully');
const formData = new FormData(form);
for (const [key, value] of formData.entries()) {
console.log(`${key}: ${value}`);
}
});
</script># Snippet 12 Inline Form
Snippet 12 Inline Form with responsive design with animations and hover interactions.
**Technology:** vanilla
**Category:** components
**Subcategory:** forms
**Tags:** animation, form, form-element, hover-effect, glassmorphism, shadow, responsive, flexbox
**Responsive:** Yes 237 lines UTF-8 · LF · Spaces: 2
Continue browsing