BismillahCSS LogoBismillahCSS
HomeDocumentation

Form Components

Build accessible and beautiful forms with BismillahCSS utilities for inputs, labels, validation, and more.

Basic Input

A simple text input field:

<div>
  <label class="bismillah-block bismillah-mb-2 bismillah-text-sm bismillah-font-medium bismillah-text-gray-700">
    Email
  </label>
  <input 
    type="email"
    class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-gray-300 bismillah-rounded-lg focus:bismillah-outline-none focus:bismillah-ring-2 focus:bismillah-ring-blue-500"
    placeholder="you@example.com"
  />
</div>

Form Controls

Text Input

<input 
  type="text"
  placeholder="Enter text"
  class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-gray-300 bismillah-rounded-lg"
/>

Textarea

<textarea 
  placeholder="Enter message"
  rows="4"
  class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-gray-300 bismillah-rounded-lg focus:bismillah-ring-2 focus:bismillah-ring-blue-500"
></textarea>

Select

<select class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-gray-300 bismillah-rounded-lg focus:bismillah-ring-2 focus:bismillah-ring-blue-500">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Checkbox

<label class="bismillah-flex bismillah-items-center">
  <input 
    type="checkbox"
    class="bismillah-w-4 bismillah-h-4 bismillah-border bismillah-border-gray-300 bismillah-rounded"
  />
  <span class="bismillah-ml-2 bismillah-text-sm bismillah-text-gray-700">Remember me</span>
</label>

Radio Button

<fieldset class="bismillah-space-y-2">
  <label class="bismillah-flex bismillah-items-center">
    <input 
      type="radio"
      name="option"
      class="bismillah-w-4 bismillah-h-4"
    />
    <span class="bismillah-ml-2 bismillah-text-sm">Option 1</span>
  </label>
  <label class="bismillah-flex bismillah-items-center">
    <input 
      type="radio"
      name="option"
      class="bismillah-w-4 bismillah-h-4"
    />
    <span class="bismillah-ml-2 bismillah-text-sm">Option 2</span>
  </label>
</fieldset>

Form States

<!-- Normal state -->
<input 
  type="text"
  class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-gray-300 bismillah-rounded-lg"
  placeholder="Normal"
/>

<!-- Focus state -->
<input 
  type="text"
  class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-blue-500 bismillah-rounded-lg bismillah-ring-2 bismillah-ring-blue-200"
  placeholder="Focused"
/>

<!-- Valid state -->
<input 
  type="text"
  class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-green-500 bismillah-rounded-lg"
  placeholder="Valid"
/>

<!-- Error state -->
<input 
  type="text"
  class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-red-500 bismillah-rounded-lg"
  placeholder="Error"
/>

<!-- Disabled state -->
<input
  type="text"
  disabled
  class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-gray-300 bismillah-rounded-lg bismillah-bg-gray-100 bismillah-cursor-not-allowed"
  placeholder="Disabled"
/>

Form Layout

<form class="bismillah-space-y-6 bismillah-max-w-md">
  <!-- Name field -->
  <div>
    <label class="bismillah-block bismillah-mb-2 bismillah-text-sm bismillah-font-medium bismillah-text-gray-700">
      Full Name
    </label>
    <input 
      type="text"
      class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-gray-300 bismillah-rounded-lg"
      placeholder="John Doe"
    />
  </div>

  <!-- Email field -->
  <div>
    <label class="bismillah-block bismillah-mb-2 bismillah-text-sm bismillah-font-medium bismillah-text-gray-700">
      Email
    </label>
    <input 
      type="email"
      class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-gray-300 bismillah-rounded-lg"
      placeholder="john@example.com"
    />
  </div>

  <!-- Message field -->
  <div>
    <label class="bismillah-block bismillah-mb-2 bismillah-text-sm bismillah-font-medium bismillah-text-gray-700">
      Message
    </label>
    <textarea 
      class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-gray-300 bismillah-rounded-lg"
      rows="4"
      placeholder="Your message"
    ></textarea>
  </div>

  <!-- Checkbox -->
  <label class="bismillah-flex bismillah-items-center">
    <input 
      type="checkbox"
      class="bismillah-w-4 bismillah-h-4"
    />
    <span class="bismillah-ml-2 bismillah-text-sm bismillah-text-gray-700">I agree to the terms</span>
  </label>

  <!-- Submit button -->
  <button 
    type="submit"
    class="bismillah-w-full bismillah-bg-blue-600 bismillah-text-white bismillah-py-2 bismillah-rounded-lg bismillah-font-semibold hover:bismillah-bg-blue-700 transition-colors"
  >
    Submit
  </button>
</form>

Form with Validation

<!-- Field with error message -->
<div class="bismillah-mb-4">
  <label class="bismillah-block bismillah-mb-2 bismillah-text-sm bismillah-font-medium bismillah-text-gray-700">
    Email
  </label>
  <input 
    type="email"
    class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-red-500 bismillah-rounded-lg focus:bismillah-ring-2 focus:bismillah-ring-red-200"
    placeholder="you@example.com"
  />
  <p class="bismillah-text-red-600 bismillah-text-sm bismillah-mt-1">Please enter a valid email</p>
</div>

<!-- Field with success message -->
<div class="bismillah-mb-4">
  <label class="bismillah-block bismillah-mb-2 bismillah-text-sm bismillah-font-medium bismillah-text-gray-700">
    Password
  </label>
  <input 
    type="password"
    class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-green-500 bismillah-rounded-lg"
    placeholder="••••••••"
  />
  <p class="bismillah-text-green-600 bismillah-text-sm bismillah-mt-1">✓ Strong password</p>
</div>

Floating Label Input

<div class="bismillah-relative">
  <input 
    type="text"
    id="floating_input"
    class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-pt-4 bismillah-border bismillah-border-gray-300 bismillah-rounded-lg focus:bismillah-ring-2 focus:bismillah-ring-blue-500 peer"
    placeholder=" "
  />
  <label 
    for="floating_input"
    class="bismillah-absolute bismillah-top-2 bismillah-left-3 bismillah-text-xs bismillah-text-gray-600 peer-placeholder-shown:bismillah-top-3 peer-placeholder-shown:bismillah-text-base peer-focus:bismillah-top-2 peer-focus:bismillah-text-xs transition-all"
  >
    Email address
  </label>
</div>

Dark Mode Forms

<div>
  <label class="bismillah-block bismillah-mb-2 bismillah-text-sm bismillah-font-medium bismillah-text-gray-700 dark:bismillah-text-gray-300">
    Email
  </label>
  <input 
    type="email"
    class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-gray-300 dark:bismillah-border-gray-600 bismillah-bg-white dark:bismillah-bg-gray-700 bismillah-text-gray-900 dark:bismillah-text-white bismillah-rounded-lg focus:bismillah-ring-2 focus:bismillah-ring-blue-500"
    placeholder="you@example.com"
  />
</div>

Input Sizes

<!-- Small -->
<input 
  type="text"
  class="bismillah-w-full bismillah-px-2 bismillah-py-1 bismillah-text-sm bismillah-border bismillah-border-gray-300 bismillah-rounded"
  placeholder="Small input"
/>

<!-- Medium (default) -->
<input 
  type="text"
  class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-border-gray-300 bismillah-rounded-lg"
  placeholder="Medium input"
/>

<!-- Large -->
<input 
  type="text"
  class="bismillah-w-full bismillah-px-4 bismillah-py-3 bismillah-text-lg bismillah-border bismillah-border-gray-300 bismillah-rounded-lg"
  placeholder="Large input"
/>

Accessibility Tips

  • Always use <label> elements with for attribute
  • Use semantic HTML elements (input, textarea, select, etc.)
  • Provide clear error messages and validation feedback
  • Make forms keyboard navigable
  • Use ARIA attributes when necessary
  • Ensure sufficient color contrast in all input states
  • Group related form fields with fieldset/legend