Skip to main content

Forms

Form components for user input.

Interactive Demo

Experiment with different form components and see how they look.

We will never share your email with anyone else.

HTML
<!-- Form Component -->
<div class="form-group">
  <label class="form-label" for="email">Email Address</label>
  <div class="input-wrapper">
    <span class="input-icon">✉️</span>
    <input
      type="email"
      id="email"
      class="form-input input-default"
      placeholder="Enter your email"
      
    />
  </div>
  <p class="form-helper">We will never share your email with anyone else.</p>
  
</div>

<div class="form-group">
  <label class="form-label" for="password">Password</label>
  <input
    type="password"
    id="password"
    class="form-input input-default"
    placeholder="Enter your password"
  />
</div>

<div class="form-group flex items-center gap-2">
  <input type="checkbox" id="remember" class="form-checkbox" />
  <label for="remember" class="text-sm text-gray-700 dark:text-gray-300">Remember me</label>
</div>

<button type="submit" class="btn btn-primary w-full">Sign In</button>

Basic Input

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

Input Variants

CSS
.form-input          /* Default style */
.input-filled        /* Filled style */
.input-outlined      /* Outlined style */

Input Sizes

CSS
.input-sm   /* Small input */
.input-md   /* Medium input (default) */
.input-lg   /* Large input */

Input with Icon

HTML
<div class="form-group">
  <label class="form-label" for="search">Search</label>
  <div class="input-wrapper">
    <span class="input-icon">🔍</span>
    <input
      type="search"
      id="search"
      class="form-input input-with-icon"
      placeholder="Search..."
    />
  </div>
</div>

Validation States

HTML
<!-- Error State -->
<div class="form-group">
  <label class="form-label" for="email">Email Address</label>
  <input
    type="email"
    id="email"
    class="form-input input-error"
    aria-invalid="true"
    aria-describedby="email-error"
  />
  <p class="form-error" id="email-error">Please enter a valid email address</p>
</div>

<!-- Success State -->
<div class="form-group">
  <label class="form-label" for="username">Username</label>
  <input
    type="text"
    id="username"
    class="form-input input-success"
  />
  <p class="form-helper text-success">Username is available</p>
</div>

Checkboxes and Radios

HTML
<!-- Checkbox -->
<div class="form-group flex items-center gap-2">
  <input type="checkbox" id="remember" class="form-checkbox" />
  <label for="remember" class="text-sm">Remember me</label>
</div>

<!-- Radio -->
<div class="form-group space-y-2">
  <div class="flex items-center gap-2">
    <input type="radio" id="option1" name="options" class="form-radio" />
    <label for="option1">Option 1</label>
  </div>
  <div class="flex items-center gap-2">
    <input type="radio" id="option2" name="options" class="form-radio" />
    <label for="option2">Option 2</label>
  </div>
</div>