Input

Forms

Form wrapper with consistent spacing, plus input elements for collecting user data.

Text Inputs

Search

Password

Select & Textarea

Checkboxes & Radios

Option checked

Option unchecked

Radio option 1

Radio option 2

Complete Form Example

Form Validation

Validation Usage

const form = DutchyForm.create(document.getElementById('my-form'), {
  rules: {
    email: [
      { required: true, message: 'Email is required' },
      { type: 'email', message: 'Enter a valid email' },
    ],
    password: [
      { required: true, message: 'Password is required' },
      { min: 8, message: 'At least 8 characters' },
      { pattern: /[A-Z]/, message: 'Include an uppercase letter' },
      { pattern: /[0-9]/, message: 'Include a number' },
    ],
  },
  validateTrigger: 'onBlur',
});

form.addEventListener('dutchy:submit', (e) => {
  console.log('Valid:', e.detail);
});