Forms

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 Sizes

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

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.

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

Build and preview custom form configurations.

Builder Options

Preview

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 Example

Integrate form validation with JavaScript for real-time feedback.

JavaScript 
const form = document.getElementById('exampleForm');
const emailInput = document.getElementById('emailInput');
const emailError = document.getElementById('emailError');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  
  // Simple email validation
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const isValid = emailRegex.test(emailInput.value);
  
  if (isValid) {
    emailInput.classList.remove('focus-input-error');
    emailInput.classList.add('focus-input-valid');
    emailError.style.display = 'none';
  } else {
    emailInput.classList.remove('focus-input-valid');
    emailInput.classList.add('focus-input-error');
    emailError.textContent = 'Please enter a valid email address';
    emailError.style.display = 'block';
  }
});

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