Forms JS Recommended

Input fields, textareas, selects and form elements with validation states and helper text.

Text Input

Basic text input field with label and placeholder.

Email Address

Password

HTML

<div class="focus-form-group">
  <label class="focus-form-label">Email Address</label>
  <input type="email" class="focus-input" placeholder="Enter your email">
</div>

<div class="focus-form-group">
  <label class="focus-form-label required">Password</label>
  <input type="password" class="focus-input" placeholder="Enter your password">
</div>

Input Sizes

Different input sizes using .focus-input-sm and .focus-input-lg.

Small Input

Default Input

Large Input

HTML

<input type="text" class="focus-input focus-input-sm" placeholder="Small size">
<input type="text" class="focus-input" placeholder="Default size">
<input type="text" class="focus-input focus-input-lg" placeholder="Large size">

Textarea

Multi-line text input with vertical resize.

Message

HTML

<div class="focus-form-group">
  <label class="focus-form-label">Message</label>
  <textarea class="focus-textarea" placeholder="Enter your message here..." rows="4"></textarea>
</div>

Select Dropdown

Dropdown select element for choosing from options.

Country

HTML

<div class="focus-form-group">
  <label class="focus-form-label">Country</label>
  <select class="focus-select">
    <option value="">Choose a country...</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="de">Germany</option>
  </select>
</div>

Search Box

Search input with icon using .focus-search-box.

HTML

<div class="focus-search-box">
  <i class="fa fa-search"></i>
  <input type="text" class="focus-input focus-search-input" placeholder="Search...">
</div>

Validation States

Show validation feedback with .focus-input-valid and .focus-input-error classes.

Valid Input Looks good!

Invalid Input Please provide a valid email address.

HTML

<!-- Valid State -->
<div class="focus-form-group">
  <label class="focus-form-label">Valid Input</label>
  <input type="text" class="focus-input focus-input-valid" value="john.doe@example.com">
  <span class="focus-form-help">Looks good!</span>
</div>

<!-- Invalid State -->
<div class="focus-form-group">
  <label class="focus-form-label">Invalid Input</label>
  <input type="text" class="focus-input focus-input-error" value="invalid-email">
  <span class="focus-form-error">Please provide a valid email address.</span>
</div>

Helper Text & Error Messages

Provide additional context with .focus-form-help and error messages with .focus-form-error.

Username Must be 4-20 characters long.

HTML

<div class="focus-form-group">
  <label class="focus-form-label">Username</label>
  <input type="text" class="focus-input" placeholder="Enter username">
  <span class="focus-form-help">Must be 4-20 characters long.</span>
</div>

Checkboxes & Radio Buttons

Checkbox and radio button inputs with labels.

I agree to the terms and conditions Subscribe to newsletter

Credit Card PayPal Bank Transfer

HTML

<!-- Checkboxes -->
<label class="focus-checkbox">
  <input type="checkbox" checked>
  <span>I agree to the terms and conditions</span>
</label>

<!-- Radio Buttons -->
<label class="focus-radio">
  <input type="radio" name="payment" checked>
  <span>Credit Card</span>
</label>
<label class="focus-radio">
  <input type="radio" name="payment">
  <span>PayPal</span>
</label>

Disabled State

Disabled inputs cannot be interacted with.

Disabled Input

Disabled Select

HTML

<input type="text" class="focus-input" placeholder="Cannot edit this" disabled>
<select class="focus-select" disabled>
  <option>Cannot select</option>
</select>

Interactive Form Builder

Build and preview custom form configurations.

Builder Options

Input Type

Size

Validation State

Disabled

Required Label

Show Helper Text

Preview

Label

Generated Code

HTML

<div class="focus-form-group">
  <label class="focus-form-label">Label</label>
  <input type="text" class="focus-input" placeholder="Enter text">
</div>

JavaScript Validation API

Simple Validation API

Use Forms.check() to validate inputs with built-in rules for required, email, minLength, maxLength, pattern matching, and more!

Form Submit Handler

Handle form submissions with automatic validation - no DOM manipulation needed:

JavaScript

Forms.onSubmit('#myForm', {
  '#email': { required: true, email: true },
  '#password': { required: true, minLength: 8 }
}, (data) => {
  // Form is valid! data contains all form values
  console.log('Submitting:', data)
  // { email: 'user@example.com', password: '...' }
})

Validate Single Field

Validate and show feedback on a single input:

JavaScript

// Validate and update UI in one call
Forms.check('#emailInput', { required: true, email: true })

Validation Rules

Available validation rules:

JavaScript

Forms.check('#myInput', {
  required: true,              // Field is required
  email: true,                 // Must be valid email
  minLength: 8,                // Minimum characters
  maxLength: 100,              // Maximum characters
  pattern: /^[A-Z]/,           // Custom regex pattern
  match: '#confirmPassword',   // Must match another field
  custom: (value) => {         // Custom validation function
    if (value === 'admin') return 'Username not allowed'
    return true
  }
})

Validate Entire Form

Validate multiple fields at once:

JavaScript

const isValid = Forms.validateForm('#myForm', {
  '#email': { required: true, email: true },
  '#password': { required: true, minLength: 8 },
  '#confirmPassword': { required: true, match: '#password' }
})

if (isValid) {
  // All fields are valid
}

Manual State Control

Set or clear validation states manually:

JavaScript

// Set valid state
Forms.setState('#myInput', true)

// Set error state with message
Forms.setState('#myInput', false, 'This field has an error')

// Clear all validation styling
Forms.clearState('#myInput')

CSS Classes Reference

Class	Description
`.focus-form-group`	Container for form field with spacing
`.focus-form-label`	Styled label for form inputs
`.focus-form-label.required`	Adds red asterisk (*) to label
`.focus-input`	Base input field styling
`.focus-input-sm`	Small input size
`.focus-input-lg`	Large input size
`.focus-textarea`	Multi-line text input with vertical resize
`.focus-select`	Dropdown select element styling
`.focus-search-box`	Container for search input with icon
`.focus-search-input`	Input with left padding for icon
`.focus-input-valid`	Green border for valid input (also works with textarea and select)
`.focus-input-error`	Red border for invalid input (also works with textarea and select)
`.focus-form-help`	Helper text below input (gray)
`.focus-form-error`	Error message below input (red)
`.focus-checkbox`	Checkbox with label wrapper
`.focus-radio`	Radio button with label wrapper