Form Components - Corrupted Theme

Text Inputs

Fully styled input elements with focus states and validation indicators.

Basic Input

Name

Required field

Email Input

Email Address

We'll never share your email

Password Input

Password

Minimum 8 characters

Input with Error

Username

Invalid username format

Input with Success

Username

Username available

Input with Icon

Search

<div class="form-group">
  <label for="email">Email Address</label>
  <input type="email" id="email" placeholder="your@email.com" required>
  <div class="form-hint">We'll never share your email</div>
</div>

<!-- With error state -->
<input style="border-color: var(--color-error);" />
<div class="form-error">Error message</div>

<!-- With success state -->
<input style="border-color: var(--color-success);" />
<div class="form-success">Success message</div>
      

Textarea

Message

Maximum 500 characters

<div class="form-group">
  <label for="message">Message</label>
  <textarea id="message" placeholder="..." rows="5"></textarea>
  <div class="form-hint">Maximum 500 characters</div>
</div>
      

Select Dropdown

Single Select

Country Select

Country

<div class="form-group">
  <label for="category">Category</label>
  <select id="category">
    <option>Select a category</option>
    <option>General Inquiry</option>
    <option>Technical Support</option>
    <option>Feedback</option>
  </select>
</div>
      

Checkboxes

Multiple Checkboxes

I want to receive email updates

I agree to the terms and conditions

I want marketing communications

Disabled option

<div class="checkbox-group">
  <div class="checkbox-item">
    <input type="checkbox" id="agree" name="agree">
    <label for="agree">I agree to the terms</label>
  </div>
  <div class="checkbox-item">
    <input type="checkbox" id="updates" name="updates" checked>
    <label for="updates">Send me updates</label>
  </div>
</div>
      

Radio Buttons

Select an Option

Option One

Option Two

Option Three

Plan Selection

Free - $0/month

Pro - $19/month

Enterprise - Custom pricing

<div class="radio-group">
  <div class="radio-item">
    <input type="radio" id="opt1" name="options" value="1" checked>
    <label for="opt1">Option One</label>
  </div>
  <div class="radio-item">
    <input type="radio" id="opt2" name="options" value="2">
    <label for="opt2">Option Two</label>
  </div>
</div>
      

Complete Form Example

<form onsubmit="handleFormSubmit(event)">
  <div class="form-group">
    <label for="name">Name <span style="color: var(--accent);">*</span></label>
    <input type="text" id="name" required>
  </div>

  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" rows="5"></textarea>
  </div>

  <div class="checkbox-item">
    <input type="checkbox" id="agree">
    <label for="agree">I agree to terms</label>
  </div>

  <div class="button-group">
    <button type="submit" class="btn">Submit</button>
    <button type="reset" class="btn btn-secondary">Reset</button>
  </div>
</form>
      