使用精美元件更快交付
NextUI Pro

核取方塊群組

CheckboxGroup 允許使用者從選項列表中選擇一個或多個項目。

Storybook@nextui-org/checkboxReact Aria原始碼樣式原始碼

安裝

上述命令僅適用於個別安裝。如果已全域安裝 @nextui-org/react ，您可以跳過此步驟。

導入

NextUI 匯出 2 個與核取方塊相關的元件

  • CheckboxGroup：根元件，它包裝標籤和外層容器。
  • Checkbox：核取方塊元件。

用法

已停用

水平

受控

您可以使用 value 和 onValueChange 屬性來控制核取方塊的輸入值。

無效

插槽

  • base：核取方塊群組的根外層容器，它包裝標籤和外層容器。
  • wrapper：核取方塊群組的外層容器，它包裝所有核取方塊。
  • label：核取方塊群組的標籤，它放置在外層容器之前。
  • description：核取方塊群組的描述。
  • errorMessage：核取方塊群組的錯誤訊息。

自訂樣式

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

自訂實作

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

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

API

核取方塊群組屬性

屬性類型預設值
children
ReactNode[] | ReactNode[]
orientation
vertical | horizontal
"vertical"
color
default | primary | secondary | success | warning | danger
"primary"
size
xs | sm | md | lg | xl
"md"
radius
none | base | xs | sm | md | lg | xl | full
"md"
name
string
label
string
value
string[]
lineThrough
boolean
false
defaultValue
string[]
isInvalid
boolean
false
validationState
valid | invalid
description
ReactNode
errorMessage
ReactNode | ((v: ValidationResult) => ReactNode)
validate
(value: string[]) => ValidationError | true | null | undefined
validationBehavior
native | aria
"native"
isDisabled
boolean
false
isRequired
boolean
false
isReadOnly
boolean
disableAnimation
boolean
false
classNames
Partial<Record<"base" | "wrapper" | "label", string>>

核取方塊群組事件

屬性類型預設值
onChange
(value: string[]) => void
核取方塊晶片