复选框卡片

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

import { CheckboxCard } from "@chakra-ui/react"

const Demo = () => {
  return (
    <CheckboxCard.Root maxW="240px">
      <CheckboxCard.HiddenInput />
      <CheckboxCard.Control>
        <CheckboxCard.Label>Next.js</CheckboxCard.Label>
        <CheckboxCard.Indicator />
      </CheckboxCard.Control>
    </CheckboxCard.Root>
  )
}

用法

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>

信息

如果您更喜欢封闭式组件组合，请查看下方代码片段。

示例

描述

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

import { CheckboxCard } from "@chakra-ui/react"

const Demo = () => {
  return (
    <CheckboxCard.Root maxW="240px">
      <CheckboxCard.HiddenInput />
      <CheckboxCard.Control>
        <CheckboxCard.Content>
          <CheckboxCard.Label>Next.js</CheckboxCard.Label>
          <CheckboxCard.Description>Best for apps</CheckboxCard.Description>
        </CheckboxCard.Content>
        <CheckboxCard.Indicator />
      </CheckboxCard.Control>
    </CheckboxCard.Root>
  )
}

分组

使用 CheckboxCardGroup 组件对多个复选框卡片进行分组。

选择框架

import { CheckboxCard, CheckboxGroup, Flex, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <CheckboxGroup defaultValue={["next"]}>
      <Text textStyle="sm" fontWeight="medium">
        Select framework(s)
      </Text>
      <Flex gap="2">
        {items.map((item) => (
          <CheckboxCard.Root key={item.value} value={item.value}>
            <CheckboxCard.HiddenInput />
            <CheckboxCard.Control>
              <CheckboxCard.Content>
                <CheckboxCard.Label>{item.title}</CheckboxCard.Label>
                <CheckboxCard.Description>
                  {item.description}
                </CheckboxCard.Description>
              </CheckboxCard.Content>
              <CheckboxCard.Indicator />
            </CheckboxCard.Control>
          </CheckboxCard.Root>
        ))}
      </Flex>
    </CheckboxGroup>
  )
}

const items = [
  { value: "next", title: "Next.js", description: "Best for apps" },
  { value: "vite", title: "Vite", description: "Best for SPAs" },
  { value: "astro", title: "Astro", description: "Best for static sites" },
]

尺寸

将 size 属性传递给 CheckboxCard.Root 组件以更改复选框卡片的尺寸。

import { CheckboxCard, For, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack maxW="320px">
      <For each={["sm", "md", "lg"]}>
        {(size) => (
          <CheckboxCard.Root size={size} key={size}>
            <CheckboxCard.HiddenInput />
            <CheckboxCard.Control>
              <CheckboxCard.Content>
                <CheckboxCard.Label>Checkbox {size}</CheckboxCard.Label>
              </CheckboxCard.Content>
              <CheckboxCard.Indicator />
            </CheckboxCard.Control>
          </CheckboxCard.Root>
        )}
      </For>
    </Stack>
  )
}

样式变体

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

import { CheckboxCard, For, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack maxW="320px">
      <For each={["subtle", "surface", "outline"]}>
        {(variant) => (
          <CheckboxCard.Root
            defaultChecked
            key={variant}
            variant={variant}
            colorPalette="teal"
          >
            <CheckboxCard.HiddenInput />
            <CheckboxCard.Control>
              <CheckboxCard.Label>Checkbox {variant}</CheckboxCard.Label>
              <CheckboxCard.Indicator />
            </CheckboxCard.Control>
          </CheckboxCard.Root>
        )}
      </For>
    </Stack>
  )
}

禁用

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

import { CheckboxCard } from "@chakra-ui/react"

const Demo = () => {
  return (
    <CheckboxCard.Root disabled maxW="320px">
      <CheckboxCard.HiddenInput />
      <CheckboxCard.Control>
        <CheckboxCard.Content>
          <CheckboxCard.Label>Disabled</CheckboxCard.Label>
          <CheckboxCard.Description>
            This is a disabled checkbox
          </CheckboxCard.Description>
        </CheckboxCard.Content>
        <CheckboxCard.Indicator />
      </CheckboxCard.Control>
    </CheckboxCard.Root>
  )
}

附加内容

在 CheckboxCard.Addon 组件中渲染附加内容，为复选框卡片添加更多上下文信息。

一些辅助文本新

import { Badge, CheckboxCard, HStack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <CheckboxCard.Root maxW="300px">
      <CheckboxCard.HiddenInput />
      <CheckboxCard.Control>
        <CheckboxCard.Content>
          <CheckboxCard.Label>With Addon</CheckboxCard.Label>
          <CheckboxCard.Description>Some description</CheckboxCard.Description>
        </CheckboxCard.Content>
        <CheckboxCard.Indicator />
      </CheckboxCard.Control>
      <CheckboxCard.Addon>
        <HStack>
          Some supporting text
          <Badge variant="solid">New</Badge>
        </HStack>
      </CheckboxCard.Addon>
    </CheckboxCard.Root>
  )
}

无指示器

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

import { CheckboxCard, HStack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack>
      <CheckboxCard.Root>
        <CheckboxCard.HiddenInput />
        <CheckboxCard.Control>
          <CheckboxCard.Label>Chakra UI</CheckboxCard.Label>
        </CheckboxCard.Control>
      </CheckboxCard.Root>

      <CheckboxCard.Root>
        <CheckboxCard.HiddenInput />
        <CheckboxCard.Control>
          <CheckboxCard.Label>Next.js</CheckboxCard.Label>
        </CheckboxCard.Control>
      </CheckboxCard.Root>
    </HStack>
  )
}

图标

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

import {
  CheckboxCard,
  CheckboxGroup,
  Float,
  Icon,
  SimpleGrid,
} from "@chakra-ui/react"
import { HiGlobeAlt, HiLockClosed, HiShieldCheck, HiUser } from "react-icons/hi"

const Demo = () => {
  return (
    <CheckboxGroup defaultValue={["Guest"]}>
      <SimpleGrid minChildWidth="200px" gap="2">
        {items.map((item) => (
          <CheckboxCard.Root align="center" key={item.label}>
            <CheckboxCard.HiddenInput />
            <CheckboxCard.Control>
              <CheckboxCard.Content>
                <Icon fontSize="2xl" mb="2">
                  {item.icon}
                </Icon>
                <CheckboxCard.Label>{item.label}</CheckboxCard.Label>
                <CheckboxCard.Description>
                  {item.description}
                </CheckboxCard.Description>
              </CheckboxCard.Content>
              <Float placement="top-end" offset="6">
                <CheckboxCard.Indicator />
              </Float>
            </CheckboxCard.Control>
          </CheckboxCard.Root>
        ))}
      </SimpleGrid>
    </CheckboxGroup>
  )
}

const items = [
  { icon: <HiShieldCheck />, label: "Admin", description: "Give full access" },
  { icon: <HiUser />, label: "User", description: "Give limited access" },
  {
    icon: <HiGlobeAlt />,
    label: "Guest",
    description: "Give read-only access",
  },
  { icon: <HiLockClosed />, label: "Blocked", description: "No access" },
]

封闭组件

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

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

如果您想自动将封闭组件添加到您的项目，请运行以下命令

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

以下是如何使用它

<CheckboxCard label="Checkbox Card" />

属性

根

属性	默认值	类型
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` 组件的颜色调色板
`size`	`'md'`	`'sm' \| 'md' \| 'lg'` 组件的尺寸
`variant`	`'outline'`	`'surface' \| 'subtle' \| 'outline' \| 'solid'` 组件的样式变体
`align`	`'start'`	`'start' \| 'end' \| 'center'` 组件的对齐方式
`orientation`	`'horizontal'`	`'vertical' \| 'horizontal'` 组件的方向
`justify`		`'start' \| 'end' \| 'center'` 组件的对齐方式
`as`		`React.ElementType` 要渲染的底层元素。
`asChild`		`布尔值` 使用所提供的子元素作为默认渲染元素，并结合其属性和行为。更多详情，请阅读我们的组合指南。
`unstyled`		`布尔值` 是否移除组件样式。

卡片

复选框

复选框卡片

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

用法