Checkbox

Checkboxes in WeedorUI are crucial interactive elements for capturing user selections and preferences. They are versatile components that can be used for forms, settings, and various user interactions. Each checkbox is highly customizable in terms of style, size, and behavior, ensuring smooth integration into your application’s design.

checkbox

Preview

HTML

<input
  type="checkbox"
  id="checkbox"
  checked
  class="w-8 h-8 appearance-none border border-gray-300 rounded-md checked:bg-slate-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-slate-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
/>

JSX

<input
  type="checkbox"
  id="checkbox"
  checked
  className="w-8 h-8 appearance-none border border-gray-300 rounded-md checked:bg-slate-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-slate-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
/>

checkbox with label control

Preview

I agree

HTML

<label for="checkbox1" class="inline-flex gap-20 text-lg items-end">
  I agree
  <input
    type="checkbox"
    id="checkbox1"
    checked
    class="w-8 h-8 appearance-none border border-gray-300 rounded-md checked:bg-slate-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-slate-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
  />
</label>

JSX

<label for="checkbox1" class="inline-flex gap-20 text-lg items-end">
  I agree
  <input
    type="checkbox"
    id="checkbox1"
    checked
    class="w-8 h-8 appearance-none border border-gray-300 rounded-md checked:bg-slate-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-slate-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
  />
</label>

checkbox with Colors

Preview

I agree

I agree

I agree

I agree

I agree

HTML

{/* Blue */}
<label for="checkbox2" class="inline-flex gap-20 text-lg items-end">
  I agree
  <input
    type="checkbox"
    id="checkbox2"
    checked
    class="w-8 h-8 appearance-none border border-blue-300 rounded-md checked:bg-blue-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
  />
</label>

    {/* Red */}
<label for="checkbox4" class="inline-flex gap-20 text-lg items-end">
    I agree
    <input
      type="checkbox"
      id="checkbox4"
      checked
      class="w-8 h-8 appearance-none border border-red-300 rounded-md checked:bg-red-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-red-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
    />
</label>

  {/* Green */}
<label for="checkbox3" class="inline-flex gap-20 text-lg items-end">
    I agree
    <input
      type="checkbox"
      id="checkbox3"
      checked
      class="w-8 h-8 appearance-none border border-green-300 rounded-md checked:bg-green-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-green-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
    />
</label>

  {/* Yellow */}
<label for="checkbox5" class="inline-flex gap-20 text-lg items-end">
    I agree
    <input
      type="checkbox"
      id="checkbox5"
      checked
      class="w-8 h-8 appearance-none border border-yellow-300 rounded-md checked:bg-yellow-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-yellow-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
    />
</label>

  {/* Purple */}
<label for="checkbox2" class="inline-flex gap-20 text-lg items-end">
    I agree
    <input
      type="checkbox"
      id="checkbox2"
      checked
      class="w-8 h-8 appearance-none border border-purple-300 rounded-md checked:bg-purple-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
    />
</label>

JSX

{/* Blue */}
<label for="checkbox2" className="inline-flex gap-20 text-lg items-end">
  I agree
  <input
    type="checkbox"
    id="checkbox2"
    checked
    className="w-8 h-8 appearance-none border border-blue-300 rounded-md checked:bg-blue-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
  />
</label>

{/* Red */}
<label for="checkbox4" className="inline-flex gap-20 text-lg items-end">
    I agree
    <input
      type="checkbox"
      id="checkbox4"
      checked
      className="w-8 h-8 appearance-none border border-red-300 rounded-md checked:bg-red-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-red-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
    />
</label>

  {/* Green */}
<label for="checkbox3" className="inline-flex gap-20 text-lg items-end">
    I agree
    <input
      type="checkbox"
      id="checkbox3"
      checked
      className="w-8 h-8 appearance-none border border-green-300 rounded-md checked:bg-green-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-green-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
    />
</label>

  {/* Yellow */}
<label for="checkbox5" className="inline-flex gap-20 text-lg items-end">
    I agree
    <input
      type="checkbox"
      id="checkbox5"
      checked
      className="w-8 h-8 appearance-none border border-yellow-300 rounded-md checked:bg-yellow-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-yellow-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
    />
</label>

  {/* Purple */}
<label for="checkbox2" className="inline-flex gap-20 text-lg items-end">
    I agree
    <input
      type="checkbox"
      id="checkbox2"
      checked
      className="w-8 h-8 appearance-none border border-purple-300 rounded-md checked:bg-purple-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
    />
</label>

checkbox with sizes

Preview

HTML

        {/* sm */}
<input
    type="checkbox"
    id="checkbox"
    checked
    class="w-6 h-6 appearance-none border border-gray-300 rounded-md checked:bg-slate-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-slate-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
    />
    {/* md */}
<input
    type="checkbox"
    id="checkbox"
    checked
    class="w-8 h-8 appearance-none border border-gray-300 rounded-md checked:bg-slate-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-slate-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
    />
    {/* lg */}
<input
    type="checkbox"
    id="checkbox"
    checked
    class="w-10 h-10 appearance-none border border-gray-300 rounded-md checked:bg-slate-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-slate-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
    />

JSX

    {/* sm */}
<input
    type="checkbox"
    id="checkbox"
    checked
    className="w-6 h-6 appearance-none border border-gray-300 rounded-md checked:bg-slate-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-slate-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
    />
    {/* md */}
<input
    type="checkbox"
    id="checkbox"
    checked
    className="w-8 h-8 appearance-none border border-gray-300 rounded-md checked:bg-slate-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-slate-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
    />
    {/* lg */}
<input
    type="checkbox"
    id="checkbox"
    checked
    className="w-10 h-10 appearance-none border border-gray-300 rounded-md checked:bg-slate-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-slate-400 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:flex before:items-center before:justify-center before:text-transparent checked:before:content-['✔'] checked:before:text-white before:text-white checked:before:p-2 before:transition before:duration-300"
    />