核取方塊

核取方塊允許使用者從個別項目列表中選擇多個項目，或將單個項目標記為已選取。

安裝

上面的指令僅適用於單獨安裝。如果已全域安裝 @nextui-org/react 則可以跳過此步驟。

導入

用法

已停用

尺寸

顏色

半徑

未定狀態

isIndeterminate 屬性會將 Checkbox 設定為未定狀態，覆蓋其外觀並保持此狀態，直到設定為 false 為止，無論使用者如何互動。

刪除線

自訂勾選圖示

預設情況下，IconProps 會傳遞到您的圖示元件。請確保 isSelected、isIndeterminate 和 disableAnimation 沒有傳遞到 DOM 元素。

受控

注意：NextUI Checkbox 也支援原生事件，例如 onChange，這對於表單庫（例如 Formik 和 React Hook Form）很有用。

插槽

• base：核取方塊包裝器，它處理對齊、放置和整體外觀。
• wrapper：一個內部容器，包含相對定位、彈性屬性、溢位處理和管理懸停和選取狀態的樣式。
• hiddenInput：用於處理核取方塊狀態的隱藏輸入元素。
• icon：核取方塊內的圖示，控制大小、可見度和勾選時的變化。
• label：與核取方塊相關聯的文字。

自訂樣式

您可以通過將自訂 Tailwind CSS 類別傳遞到元件插槽來自訂 Checkbox 元件。

自訂實作

如果您需要進一步自訂核取方塊，可以使用 useCheckbox hook 來建立您自己的實作。

注意：我們使用 Tailwind Variants 來實作上述樣式，您可以使用任何其他函式庫（例如 clsx）來達到相同的結果。

資料屬性

Checkbox 在 base 元素上具有以下屬性

• data-selected：核取方塊勾選時。基於 isSelected 屬性。
• data-pressed：核取方塊按下時。基於 usePress
• data-invalid：核取方塊無效時。基於 validationState 屬性。
• data-readonly：核取方塊為唯讀時。基於 isReadOnly 屬性。
• data-indeterminate：核取方塊為未定狀態時。基於 isIndeterminate 屬性。
• data-hover：核取方塊懸停時。基於 useHover
• data-focus: 當核取方塊處於焦點時。基於 useFocusRing。
• data-focus-visible: 當核取方塊透過鍵盤處於焦點時。基於 useFocusRing。
• data-disabled: 當核取方塊被停用時。基於 isDisabled 屬性。
• data-loading: 當核取方塊正在載入時。基於 isLoading 屬性。

無障礙功能

• 使用原生 HTML <input> 元素建構。
• 完整支援瀏覽器功能，例如表單自動填寫。
• 鍵盤焦點管理和跨瀏覽器標準化。
• 支援 Tab 和 Space 鍵的鍵盤事件。
• 支援輔助技術的標籤。
• 支援不確定狀態。

API

核取方塊 Props

核取方塊事件

類型

核取方塊圖示 Props