Forms optional

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

Text Input

Basic text input field with label and placeholder.

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 Heights

Use large inputs for important fields that need emphasis or better touch targets on mobile. Use small inputs in dense layouts like data tables or compact admin panels:

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">

Input Widths

Use 50% width for two-column layouts (first name / last name), auto width for inputs that should match their content (ZIP codes, ages), and 100% (default) for single-column forms:

HTML 
<input type="text" class="focus-input focus-input-w-auto" placeholder="Width auto">
<input type="text" class="focus-input focus-input-w-25" placeholder="25% width">
<input type="text" class="focus-input focus-input-w-50" placeholder="50% width">
<input type="text" class="focus-input focus-input-w-75" placeholder="75% width">
<input type="text" class="focus-input focus-input-w-100" placeholder="100% width">
Width Modifiers

Width classes work with .focus-input, .focus-select, and .focus-textarea. Percentage widths include sensible minimum widths to prevent inputs from becoming too narrow.

Textarea

Multi-line text input with vertical resize.

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.

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 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.

Looks good!
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.

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.

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.

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

Customize a form input and see the code update in real-time:

HTML 
<div class="focus-form-group">
  <label class="focus-form-label">Email Address</label>
  <input type="email" class="focus-input" placeholder="your@email.com">
</div>

Builder Options

Input Type:
Size:
Width:
Validation:
Options:

JavaScript API

Validate forms and inputs programmatically with built-in rules.

Form Submit Handler

JavaScript 
Forms.onSubmit('#myForm', {
  '#email': { required: true, email: true },
  '#password': { required: true, minLength: 8 }
}, (data) => {
  console.log('Submitting:', data)
})

Validate Single Field

JavaScript 
Forms.check('#emailInput', { required: true, email: true })

Validate Entire Form

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

Manual State Control

JavaScript 
Forms.setState('#myInput', true)
Forms.setState('#myInput', false, 'Error message')
Forms.clearState('#myInput')

Methods

Method Returns Description
Forms.onSubmit(form, rules, callback) void Handle form submit with validation
Forms.check(selector, rules) boolean Validate single field and update UI
Forms.validateForm(form, rules) boolean Validate multiple fields
Forms.setState(selector, valid, message) void Set validation state manually
Forms.clearState(selector) void Clear validation styling

Validation Rules

Rule Type Description
required boolean Field must have a value
email boolean Must be valid email format
minLength number Minimum character count
maxLength number Maximum character count
pattern RegExp Custom regex pattern
match string Must match another field (selector)
custom function Custom validation function. Return true or error message.

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