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>
)
}
用法
¥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>
如果你更喜欢封闭的组件组合,请查看 以下代码片段。
¥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.
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>
)
}
组
¥Group
使用 CheckboxCardGroup
组件将多个复选框卡片分组。
¥Use the CheckboxCardGroup
component to group multiple checkbox cards.
Select framework(s)
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" },
]
尺寸
¥Sizes
将 size
属性传递给 CheckboxCard.Root
组件,即可更改复选框的大小。
¥Pass the size
prop to the CheckboxCard.Root
component to change the size of
the checkbox card.
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>
)
}
变量
¥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.
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
将 disabled
属性传递给 CheckboxCard.Root
组件,以禁用复选框卡片。
¥Pass the disabled
prop to the CheckboxCard.Root
component to make the
checkbox card disabled.
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>
)
}
插件
¥Addon
在 CheckboxCard.Addon
组件中渲染其他内容,为复选框卡片添加更多上下文。
¥Render additional content within the CheckboxCard.Addon
component to add some
more context to the checkbox card.
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>
)
}
无指示器
¥No Indicator
以下是如何在不使用指示器的情况下使用复选框卡片的示例。
¥Here's an example of how to use the checkbox card without an indicator.
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>
)
}
图标
¥Icon
以下是如何在复选框卡片中渲染自定义图标的示例。
¥Here's an example of how to render custom icons within the checkbox card.
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" },
]
已关闭组件
¥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
Prop | Default | Type |
---|---|---|
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 |