Tailwind CSS home page
  1. INPUTS
  2. Checkbox

​
Basic usage

​
Basic checkbox

<div class="flex items-center">
    <input id="default-checkbox" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
    <label for="default-checkbox" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Default checkbox</label>
</div>
<div class="flex items-center">
    <input checked type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
    <label class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Checked state</label>
</div>

​
Adding Some Background Styles

<div class="flex items-center rounded-sm bg-opacity-20 bg-gray-400 border border-gray-500 p-1">
    <input id="default-checkbox" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
    <label for="default-checkbox" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Default checkbox</label>
</div>
<div class="flex items-center rounded-sm bg-opacity-20 bg-gray-400 border border-gray-500 p-1">
    <input checked type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
    <label class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Checked state</label>
</div>

​
Icon Checkbox

IconCheckbox.js
import { useState } from "react";
import { BankIcon } from "@vwjs/icons";

export function IconCheckbox() {
const [checked, setChecked] = useState(false);
return (
  <>
    <BankIcon
      onClick={() => setChecked(!checked)}
      width={25}
      height={25}
      fill-rule="nonzero"
      fill={checked ? "blue" : "#d4d4d8"}
    />
  </>
);
}

​
usage