Text Inputs

Style text inputs with custom borders, padding, and focus states. Always include visible focus indicators for accessibility.

Basic Input

Full Name

Email

Input with Icon

Search

⌕

Input States

Success

Looks good!

Error

Please enter a valid value.

Floating Label

Your Name

Email Address

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.form-input--error { border-color: #ef4444; }
.form-input--success { border-color: #22c55e; }

Checkboxes & Radio Buttons

Create custom checkboxes and radio buttons by hiding the default input and styling a custom element. Keep the input accessible.

.checkbox-input { position: absolute; opacity: 0; }
.checkbox-custom {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.checkbox-input:checked + .checkbox-custom {
  background: #6366f1;
  border-color: #6366f1;
}
.checkbox-custom::after {
  content: ''; width: 6px; height: 10px;
  border: solid white; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
}
.checkbox-input:checked + .checkbox-custom::after {
  transform: rotate(45deg) scale(1);
}

Toggle Switch

Create iOS-style toggle switches using a styled checkbox. The switch slides smoothly with CSS transitions.

Toggle Switches

Enable notifications

Dark mode

Auto-save

.toggle-switch {
  width: 3rem; height: 1.5rem;
  background: #d1d5db;
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  width: 1.25rem; height: 1.25rem;
  background: white;
  border-radius: 50%;
  top: 0.125rem; left: 0.125rem;
  transition: transform 0.2s;
}
.toggle-input:checked + .toggle-switch { background: #6366f1; }
.toggle-input:checked + .toggle-switch::after { transform: translateX(1.5rem); }

Select & Range Slider

Style select dropdowns with custom arrows and create custom range sliders with styled thumbs.

Custom Select

Country

▼

Range Slider

Volume

60%

.form-select {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  appearance: none;
  background: white;
}
.select-arrow { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }

.form-range { width: 100%; appearance: none; height: 0.5rem; background: #e5e7eb; border-radius: 9999px; }
.form-range::-webkit-slider-thumb {
  appearance: none;
  width: 1.25rem; height: 1.25rem;
  background: #6366f1;
  border-radius: 50%;
}

Buttons

Style buttons with different variants, sizes, and states. Include hover, focus, and disabled states.

Button Variants

Button Sizes

Button States

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn--primary { background: #6366f1; color: white; }
.btn--primary:hover { background: #4f46e5; }
.btn--outline { background: transparent; border: 2px solid #6366f1; color: #6366f1; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

Complete Form Example

Combine all elements into a complete, accessible form.

Sign Up Form

<form>
  <div class="form-group">
    <label class="form-label" for="email">Email</label>
    <input type="email" id="email" class="form-input" required>
  </div>
  <div class="form-group">
    <label class="checkbox-wrapper">
      <input type="checkbox" class="checkbox-input">
      <span class="checkbox-custom"></span>
      <span>Remember me</span>
    </label>
  </div>
  <button type="submit" class="btn btn--primary">Submit</button>
</form>