實作 CheckBox | 點燈坊

CheckBox 必須點到 方框 才能選取，實務上會想要點擊 Label 也相當於選擇 CheckBox，可將 <input> 與 <label> 合作達成。

Version

Tailwind CSS 2.0.3

CheckBox

當 cursor 指向 label 時也會出現 pointer，表示點下 label 亦能點選 checkbox。

<template>
  <label class="cursor-pointer">
    <input type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded cursor-pointer focus:ring-indigo-500">
    Remember me
  </label>
</template>

第 2 行

<label class="cursor-pointer"><inpu type="checkbox">Remember me</label>

將 <input> 包在 <label> 內，如此當點下 <label> 時相當於選擇 checkbox。

第 3 行

<input type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded cursor-pointer focus:ring-indigo-500">

設定 checkbox style：

• h-4、w-4：設定 checkbox 的長寬
• text-indigo-600：設定文字顏色
• border-gray-300：設定 border 顏色
• rounded：設定圓角
• cursor-pointer：設計 cursor 為 pointer
• focus:ring-indigo-500：設定 focus 時 ring 顏色

@tailwindcss/form Plugin

$ yarn add --dev @tailwindcss/forms

CheckBox 需搭配 @tailwindcss/forms plugin，使用 Yarn 安裝。

tailwind.config.js

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ]
}

10 行

plugins: [
  require('@tailwindcss/forms'),
]

設定使用 @tailwindcss/forms plugin。

Conclusion

• CheckBox 需搭配 @tailwindcss/forms plugin，如此可減少 utility 使用量

Reference

Tailwind CSS, Pointer