Skip to Content
文档

复选框卡片

用于选择或取消选择卡片内显示的选项。

SourceStorybookRecipeArk

用法

¥Usage

import { CheckboxCard } from "@chakra-ui/react"
<CheckboxCard.Root>
  <CheckboxCard.HiddenInput />
  <CheckboxCard.Control>
    <CheckboxCard.Content>
      <CheckboxCard.Label />
      <CheckboxCard.Description />
    </CheckboxCard.Content>
    <CheckboxCard.Indicator />
  </CheckboxCard.Control>
</CheckboxCard.Root>
info

如果你更喜欢封闭的组件组合,请查看 以下代码片段

¥If you prefer a closed component composition, check out the snippet below.

示例

¥Examples

描述

¥Description

使用 CheckboxCard.Description 组件为复选框卡片添加描述。

¥Use the CheckboxCard.Description component to add a description to the checkbox card.

¥Group

使用 CheckboxCardGroup 组件将多个复选框卡片分组。

¥Use the CheckboxCardGroup component to group multiple checkbox cards.

Select framework(s)

尺寸

¥Sizes

size 属性传递给 CheckboxCard.Root 组件,即可更改复选框的大小。

¥Pass the size prop to the CheckboxCard.Root component to change the size of the checkbox card.

变量

¥Variants

使用 variant 属性将 variant 属性传递给 CheckboxCard.Root 组件,以更改复选框卡片的变体。

¥Use the variant prop to Pass the variant prop to the CheckboxCard.Root component to change the variant of the checkbox card.

已禁用

¥Disabled

disabled 属性传递给 CheckboxCard.Root 组件,以禁用复选框卡片。

¥Pass the disabled prop to the CheckboxCard.Root component to make the checkbox card disabled.

插件

¥Addon

CheckboxCard.Addon 组件中渲染其他内容,为复选框卡片添加更多上下文。

¥Render additional content within the CheckboxCard.Addon component to add some more context to the checkbox card.

无指示器

¥No Indicator

以下是如何在不使用指示器的情况下使用复选框卡片的示例。

¥Here's an example of how to use the checkbox card without an indicator.

图标

¥Icon

以下是如何在复选框卡片中渲染自定义图标的示例。

¥Here's an example of how to render custom icons within the checkbox card.

已关闭组件

¥Closed Component

以下是如何为封闭组件组合设置复选框卡片。

¥Here's how to setup the Checkbox card for a closed component composition.

import { CheckboxCard as ChakraCheckboxCard } from "@chakra-ui/react"
import * as React from "react"

export interface CheckboxCardProps extends ChakraCheckboxCard.RootProps {
  icon?: React.ReactElement
  label?: React.ReactNode
  description?: React.ReactNode
  addon?: React.ReactNode
  indicator?: React.ReactNode | null
  indicatorPlacement?: "start" | "end" | "inside"
  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
}

export const CheckboxCard = React.forwardRef<
  HTMLInputElement,
  CheckboxCardProps
>(function CheckboxCard(props, ref) {
  const {
    inputProps,
    label,
    description,
    icon,
    addon,
    indicator = <ChakraCheckboxCard.Indicator />,
    indicatorPlacement = "end",
    ...rest
  } = props

  const hasContent = label || description || icon
  const ContentWrapper = indicator ? ChakraCheckboxCard.Content : React.Fragment

  return (
    <ChakraCheckboxCard.Root {...rest}>
      <ChakraCheckboxCard.HiddenInput ref={ref} {...inputProps} />
      <ChakraCheckboxCard.Control>
        {indicatorPlacement === "start" && indicator}
        {hasContent && (
          <ContentWrapper>
            {icon}
            {label && (
              <ChakraCheckboxCard.Label>{label}</ChakraCheckboxCard.Label>
            )}
            {description && (
              <ChakraCheckboxCard.Description>
                {description}
              </ChakraCheckboxCard.Description>
            )}
            {indicatorPlacement === "inside" && indicator}
          </ContentWrapper>
        )}
        {indicatorPlacement === "end" && indicator}
      </ChakraCheckboxCard.Control>
      {addon && <ChakraCheckboxCard.Addon>{addon}</ChakraCheckboxCard.Addon>}
    </ChakraCheckboxCard.Root>
  )
})

export const CheckboxCardIndicator = ChakraCheckboxCard.Indicator

如果你想自动将封闭式组件添加到项目中,请运行以下命令:

¥If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add checkbox-card

以下是如何使用它

¥Here's how to use the it

<CheckboxCard label="Checkbox Card" />

属性

¥Props

根元素

¥Root

PropDefaultType
value '\'on\''
string

The value of checkbox input. Useful for form submission.

colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'

The color palette of the component

size 'md'
'sm' | 'md' | 'lg'

The size of the component

variant 'outline'
'surface' | 'subtle' | 'outline' | 'solid'

The variant of the component

align 'start'
'start' | 'end' | 'center'

The align of the component

orientation 'horizontal'
'vertical' | 'horizontal'

The orientation of the component

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

checked
CheckedState

The controlled checked state of the checkbox

defaultChecked
CheckedState

The initial checked state of the checkbox when rendered. Use when you don't need to control the checked state of the checkbox.

disabled
boolean

Whether the checkbox is disabled

form
string

The id of the form that the checkbox belongs to.

id
string

The unique identifier of the machine.

ids
Partial<{ root: string; hiddenInput: string; control: string; label: string }>

The ids of the elements in the checkbox. Useful for composition.

invalid
boolean

Whether the checkbox is invalid

name
string

The name of the input field in a checkbox. Useful for form submission.

onCheckedChange
(details: CheckedChangeDetails) => void

The callback invoked when the checked state changes.

readOnly
boolean

Whether the checkbox is read-only

required
boolean

Whether the checkbox is required

justify
'start' | 'end' | 'center'

The justify of the component

Previous

复选框

Next

颜色选择器