Tailwind CSS Checkbox Form Examples

In this section we will see a tailwind css checkbox. also set up tailwind form plugin, it will help to easy tailwind custom style checkbox. in this tutorial we create simple checkbox, large size checkbox, small size checkbox, medium size checkbox, rounded checkbox, circle checkbox, no focus and no ring checkbox, success checkbox example with Tailwind CSS.

Tool Use

Tailwind CSS 2.x / 3.x

@tailwindcss/forms

Set up form plugin

Using CDN

<link
  href="https://cdn.jsdelivr.net/npm/@tailwindcss/[email protected]/dist/custom-forms.css"
  rel="stylesheet"
/>

or

Install form plugin

# Using npm
npm install @tailwindcss/forms

# Using Yarn
yarn add @tailwindcss/forms

tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  mode: 'jit',
  theme: {
    extend: {
      colors: {
        sky: colors.sky,
        cyan: colors.cyan,
      },
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/forms')],
}

Tailwind CSS Checkbox Form Examples

Example 1

Simple checkbox

<div class="block">
  <div class="mt-2">
    <label class="inline-flex items-center">
      <input type="checkbox" checked />
      <span class="ml-2">Simple checkbox</span>
    </label>
  </div>
</div>

Example 2

Large size checkbox style

<div class="block">
  <div class="mt-2">
    <label class="inline-flex items-center">
      <input type="checkbox" class="w-8 h-8"  />
      <span class="ml-2">Large size checkbox</span>
    </label>
  </div>
</div>

Small size checkbox style.

<div class="block">
  <div class="mt-2">
    <label class="inline-flex items-center">
      <input type="checkbox" class="w-4 h-4"  />
      <span class="ml-2">Small size checkbox</span>
    </label>
  </div>
</div>

Medium size checkbox style (recommended)

<div class="block">
  <div class="mt-2">
    <label class="inline-flex items-center">
      <input type="checkbox" class="w-6 h-6 rounded"  />
      <span class="ml-2">Medium size checkbox (recommended) </span>
    </label>
  </div>
</div>

Example 3

Rounded checkbox

<div class="block">
  <div class="mt-2">
    <label class="inline-flex items-center">
      <input type="checkbox" class="w-6 h-6 rounded"  />
      <span class="ml-2">Rounded checkbox</span>
    </label>
  </div>
</div>

Circle checkbox

<div class="block">
  <div class="mt-2">
    <label class="inline-flex items-center">
      <input type="checkbox" class="w-6 h-6 rounded-full"  />
      <span class="ml-2">Circle checkbox</span>
    </label>
  </div>
</div>

Example 4

no focus and no ring checkbox

<div class="block">
  <div class="mt-2">
    <label class="inline-flex items-center">
      <input type="checkbox" class="w-4 h-4 border-0 focus:ring-0" checked />
      <span class="ml-2">No focus and ring</span>
    </label>
  </div>
</div>

Success style checkbox

<div class="block">
  <div class="mt-2">
    <label class="inline-flex items-center">
      <input type="checkbox" class="w-6 h-6 text-green-600 border-0 rounded-md focus:ring-0" checked />
      <span class="ml-2">Success checkbox</span>
    </label>
  </div>
</div>

See Also

Tailwind CSS Free Digital Agency Landing Page

TailFood – Free Tailwind CSS Restaurant Template

Tailwind CSS Real Estate Template

Tailwind CSS Simple Responsive Landing Page Template

Tailwind CSS Simple Verification Email Template

Read Also

Tailwind CSS 3 FAQ Accordion UI Example

Tailwind CSS 3 Alert Message Example

Tailwind CSS 3 Avatars Example

Tailwind CSS 3 Badges Example

Tailwind CSS 3 Breadcrumb Example

Tailwind CSS v3 Button Examples

Tailwind CSS Gradient Button Example

Tailwind CSS 3D Button Example

Tailwind CSS Loading Button Example

Tailwind CSS v3 Cards Examples

Tailwind CSS Checkbox Form Examples

Tailwind CSS Dropdowns (Menu) on Hover Example

Tailwind CSS Multiselect Dropdown Example

How to use dark mode toggle switch in Tailwind CSS 3

How to use @apply directive in Tailwind CSS

Tailwind CSS sticky header & fixed navbar example

Tailwind CSS Navbar UI Example

Tailwind CSS 3 Login Page UI Example

Tailwind CSS Login Modal Example

Tailwind CSS Search Examples

Tailwind CSS 3 Overlay Image Example

Tailwind CSS Thank You Page Example

Tailwind CSS Timeline UI Example

Tailwind CSS Responsive Footer Section Example

Tailwind CSS Background Image Header Example