Checkbox 复选框

复选框允许用户从列表中选择多项，或标记单个项目为选中状态

用法

1import { Checkbox } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox } from "@lenso/ui";4
5export function Basic() {6  return (7    <Checkbox name="basic-terms">8      <Checkbox.Content>9        <Checkbox.Control>10          <Checkbox.Indicator />11        </Checkbox.Control>12        Accept terms and conditions13      </Checkbox.Content>14    </Checkbox>15  );16}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

组件结构

1import { Checkbox, Description, FieldError } from '@lenso/ui';2
3export default () => (4  <Checkbox>5    <Checkbox.Content>6      <Checkbox.Control>7        <Checkbox.Indicator />8      </Checkbox.Control>9      Label {/* 纯文本 — 可点击标签与无障碍名称 */}10    </Checkbox.Content>11    <Description /> {/* 可选 — 字段级帮助文本 */}12    <FieldError /> {/* 可选 — 校验消息 */}13  </Checkbox>14);

示例

变体

Checkbox 组件支持两种视觉变体：

primary（默认）- 标准样式与默认背景，适用于大多数场景
secondary - 低强调变体，适用于 Surface 组件内

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, Description, TextField } from "@lenso/ui";4import { checkboxSupportingStyles } from "@lenso/tokens/checkbox";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({7  root: { display: "flex", flexDirection: "column", gap: "1rem" },8  section: { display: "flex", flexDirection: "column", gap: ".5rem" },9  heading: { fontSize: ".875rem", fontWeight: 500, color: "var(--muted)" },10});11export function Variants() {12  return (13    <div {...stylex.props(styles.root)}>14      <div {...stylex.props(styles.section)}>15        <p {...stylex.props(styles.heading)}>Primary variant</p>16        <TextField>17          <Checkbox id="primary" name="primary" variant="primary">18            <Checkbox.Content>19              <Checkbox.Control>20                <Checkbox.Indicator />21              </Checkbox.Control>22              Primary checkbox23            </Checkbox.Content>24            <Description xstyle={checkboxSupportingStyles.direct}>25              Standard styling with default background26            </Description>27          </Checkbox>28        </TextField>29      </div>30      <div {...stylex.props(styles.section)}>31        <p {...stylex.props(styles.heading)}>Secondary variant</p>32        <TextField>33          <Checkbox id="secondary" name="secondary" variant="secondary">34            <Checkbox.Content>35              <Checkbox.Control>36                <Checkbox.Indicator />37              </Checkbox.Control>38              Secondary checkbox39            </Checkbox.Content>40            <Description xstyle={checkboxSupportingStyles.direct}>41              Lower emphasis variant for use in surfaces42            </Description>43          </Checkbox>44        </TextField>45      </div>46    </div>47  );48}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全圆角

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox } from "@lenso/ui";4import { labelStyles } from "@lenso/tokens/label";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({7  root: { display: "flex", flexDirection: "column", gap: "1.5rem" },8  section: { display: "flex", flexDirection: "column", gap: ".75rem" },9  label: { color: "var(--muted)" },10  smallIndicator: { "--checkbox-checkmark-size": ".5rem" },11  extraLargeIndicator: { "--checkbox-checkmark-size": "1rem" },12  small: {13    width: ".75rem",14    height: ".75rem",15    borderRadius: "9999px",16    "::before": { borderRadius: "9999px" },17  },18  medium: {19    width: "1rem",20    height: "1rem",21    borderRadius: "9999px",22    "::before": { borderRadius: "9999px" },23  },24  large: {25    width: "1.25rem",26    height: "1.25rem",27    borderRadius: "9999px",28    "::before": { borderRadius: "9999px" },29  },30  extraLarge: {31    width: "1.5rem",32    height: "1.5rem",33    borderRadius: "9999px",34    "::before": { borderRadius: "9999px" },35  },36});37export function FullRounded() {38  return (39    <div {...stylex.props(styles.root)}>40      <div {...stylex.props(styles.section)}>41        <span {...stylex.props(labelStyles.label, styles.label)}>Rounded checkboxes</span>42        <Checkbox name="small-rounded">43          <Checkbox.Content>44            <Checkbox.Control xstyle={styles.small}>45              <Checkbox.Indicator xstyle={styles.smallIndicator} />46            </Checkbox.Control>47            Small size48          </Checkbox.Content>49        </Checkbox>50      </div>51      <div {...stylex.props(styles.section)}>52        <Checkbox name="default-rounded">53          <Checkbox.Content>54            <Checkbox.Control xstyle={styles.medium}>55              <Checkbox.Indicator />56            </Checkbox.Control>57            Default size58          </Checkbox.Content>59        </Checkbox>60      </div>61      <div {...stylex.props(styles.section)}>62        <Checkbox name="large-rounded">63          <Checkbox.Content>64            <Checkbox.Control xstyle={styles.large}>65              <Checkbox.Indicator />66            </Checkbox.Control>67            Large size68          </Checkbox.Content>69        </Checkbox>70      </div>71      <div {...stylex.props(styles.section)}>72        <Checkbox name="xl-rounded">73          <Checkbox.Content>74            <Checkbox.Control xstyle={styles.extraLarge}>75              <Checkbox.Indicator xstyle={styles.extraLargeIndicator} />76            </Checkbox.Control>77            Extra large size78          </Checkbox.Content>79        </Checkbox>80      </div>81    </div>82  );83}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

禁用

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, Description, TextField } from "@lenso/ui";4import { checkboxSupportingStyles } from "@lenso/tokens/checkbox";5export function Disabled() {6  return (7    <TextField>8      <Checkbox disabled id="feature" aria-describedby="feature-help">9        <Checkbox.Content>10          <Checkbox.Control>11            <Checkbox.Indicator />12          </Checkbox.Control>13          Premium Feature14        </Checkbox.Content>15        <Description id="feature-help" xstyle={checkboxSupportingStyles.direct}>16          This feature is coming soon17        </Description>18      </Checkbox>19    </TextField>20  );21}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

外部标签

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox } from "@lenso/ui";4import { labelStyles } from "@lenso/tokens/label";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({ root: { display: "flex", alignItems: "center", gap: ".75rem" } });7export function ExternalLabel() {8  return (9    <div {...stylex.props(styles.root)}>10      <Checkbox id="label-marketing">11        <Checkbox.Content>12          <Checkbox.Control>13            <Checkbox.Indicator />14          </Checkbox.Control>15        </Checkbox.Content>16      </Checkbox>17      <label {...stylex.props(labelStyles.label)} htmlFor="label-marketing">18        Send me marketing emails19      </label>20    </div>21  );22}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

带描述

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, Description, TextField } from "@lenso/ui";4import { checkboxSupportingStyles } from "@lenso/tokens/checkbox";5export function WithDescription() {6  return (7    <TextField>8      <Checkbox name="description-notifications" aria-describedby="description-notifications-help">9        <Checkbox.Content>10          <Checkbox.Control>11            <Checkbox.Indicator />12          </Checkbox.Control>13          Email notifications14        </Checkbox.Content>15        <Description id="description-notifications-help" xstyle={checkboxSupportingStyles.direct}>16          Get notified when someone mentions you in a comment17        </Description>18      </Checkbox>19    </TextField>20  );21}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

默认选中

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox } from "@lenso/ui";4export function DefaultSelected() {5  return (6    <Checkbox defaultChecked id="default-notifications">7      <Checkbox.Content>8        <Checkbox.Control>9          <Checkbox.Indicator />10        </Checkbox.Control>11        Enable email notifications12      </Checkbox.Content>13    </Checkbox>14  );15}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

无效状态

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, FieldError, TextField } from "@lenso/ui";4import { checkboxSupportingStyles } from "@lenso/tokens/checkbox";5export function Invalid() {6  return (7    <TextField invalid>8      <Checkbox required name="agreement">9        <Checkbox.Content>10          <Checkbox.Control>11            <Checkbox.Indicator />12          </Checkbox.Control>13          I agree to the terms14        </Checkbox.Content>15        <FieldError16          match17          xstyle={[checkboxSupportingStyles.direct, checkboxSupportingStyles.error]}18        >19          You must accept the terms to continue20        </FieldError>21      </Checkbox>22    </TextField>23  );24}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

受控组件

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({7  root: { display: "flex", flexDirection: "column", gap: ".75rem" },8  status: { fontSize: ".875rem", color: "var(--muted)" },9  strong: { fontWeight: 500 },10});11export function Controlled() {12  const [isSelected, setIsSelected] = useState(true);13  return (14    <div {...stylex.props(styles.root)}>15      <Checkbox id="email-notifications" checked={isSelected} onCheckedChange={setIsSelected}>16        <Checkbox.Content>17          <Checkbox.Control>18            <Checkbox.Indicator />19          </Checkbox.Control>20          Email notifications21        </Checkbox.Content>22      </Checkbox>23      <p {...stylex.props(styles.status)}>24        Status: <span {...stylex.props(styles.strong)}>{isSelected ? "Enabled" : "Disabled"}</span>25      </p>26    </div>27  );28}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

半选状态

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, Description, TextField } from "@lenso/ui";4import { checkboxSupportingStyles } from "@lenso/tokens/checkbox";5import { useState } from "react";6export function Indeterminate() {7  const [isIndeterminate, setIsIndeterminate] = useState(true);8  const [isSelected, setIsSelected] = useState(false);9  return (10    <TextField>11      <Checkbox12        id="select-all"13        indeterminate={isIndeterminate}14        checked={isSelected}15        onCheckedChange={(selected) => {16          setIsSelected(selected);17          setIsIndeterminate(false);18        }}19      >20        <Checkbox.Content>21          <Checkbox.Control>22            <Checkbox.Indicator />23          </Checkbox.Control>24          Select all25        </Checkbox.Content>26        <Description xstyle={checkboxSupportingStyles.direct}>27          Shows indeterminate state (dash icon)28        </Description>29      </Checkbox>30    </TextField>31  );32}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

表单集成

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Button, Checkbox } from "@lenso/ui";4import type { FormEvent } from "react";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({7  form: { display: "flex", flexDirection: "column", gap: "1rem" },8  items: { display: "flex", flexDirection: "column", gap: ".75rem" },9  submit: { marginTop: "1rem" },10});11export function Form() {12  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {13    e.preventDefault();14    const formData = new FormData(e.currentTarget);15    alert(16      `Form submitted with:\n${Array.from(formData.entries())17        .map(([key, value]) => `${key}: ${value}`)18        .join("\n")}`,19    );20  };21  return (22    <form {...stylex.props(styles.form)} onSubmit={handleSubmit}>23      <div {...stylex.props(styles.items)}>24        <Checkbox name="notifications" value="on">25          <Checkbox.Content>26            <Checkbox.Control>27              <Checkbox.Indicator />28            </Checkbox.Control>29            Enable notifications30          </Checkbox.Content>31        </Checkbox>32        <Checkbox defaultChecked name="newsletter" value="on">33          <Checkbox.Content>34            <Checkbox.Control>35              <Checkbox.Indicator />36            </Checkbox.Control>37            Subscribe to newsletter38          </Checkbox.Content>39        </Checkbox>40        <Checkbox name="marketing" value="on">41          <Checkbox.Content>42            <Checkbox.Control>43              <Checkbox.Indicator />44            </Checkbox.Control>45            Receive marketing updates46          </Checkbox.Content>47        </Checkbox>48      </div>49      <Button xstyle={styles.submit} size="sm" type="submit" variant="primary">50        Submit51      </Button>52    </form>53  );54}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

渲染属性

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, Description, TextField } from "@lenso/ui";4import { checkboxSupportingStyles } from "@lenso/tokens/checkbox";5export function RenderProps() {6  return (7    <TextField>8      <Checkbox9        id="render-props-terms"10        render={(props, { checked }) => (11          <span {...props}>12            <Checkbox.Content>13              <Checkbox.Control>14                <Checkbox.Indicator />15              </Checkbox.Control>16              {checked ? "Terms accepted" : "Accept terms"}17            </Checkbox.Content>18            <Description xstyle={checkboxSupportingStyles.direct}>19              {checked ? "Thank you for accepting" : "Please read and accept the terms"}20            </Description>21          </span>22        )}23      />24    </TextField>25  );26}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

渲染函数

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox } from "@lenso/ui";4export function RenderFunction() {5  return (6    <Checkbox render={(props) => <div {...props} data-custom="bar" />}>7      <Checkbox.Content>8        <Checkbox.Control>9          <Checkbox.Indicator />10        </Checkbox.Control>11        Accept terms and conditions12      </Checkbox.Content>13    </Checkbox>14  );15}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义指示器

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ root: { display: "flex", gap: "1rem" } });6export function CustomIndicator() {7  return (8    <div {...stylex.props(styles.root)}>9      <Checkbox defaultChecked name="heart">10        <Checkbox.Content>11          <Checkbox.Control>12            <Checkbox.Indicator13              render={(props, { checked }) => (14                <span {...props}>15                  {checked ? (16                    <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">17                      <path d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z" />18                    </svg>19                  ) : null}20                </span>21              )}22            />23          </Checkbox.Control>24          Heart25        </Checkbox.Content>26      </Checkbox>27      <Checkbox defaultChecked name="plus">28        <Checkbox.Content>29          <Checkbox.Control>30            <Checkbox.Indicator31              render={(props, { checked }) => (32                <span {...props}>33                  {checked ? (34                    <svg aria-hidden="true" fill="none" viewBox="0 0 24 24">35                      <path36                        d="M6 12H18"37                        stroke="currentColor"38                        strokeLinecap="round"39                        strokeLinejoin="round"40                        strokeWidth="3"41                      />42                      <path43                        d="M12 18V6"44                        stroke="currentColor"45                        strokeLinecap="round"46                        strokeLinejoin="round"47                        strokeWidth="3"48                      />49                    </svg>50                  ) : null}51                </span>52              )}53            />54          </Checkbox.Control>55          Plus56        </Checkbox.Content>57      </Checkbox>58      <Checkbox indeterminate name="indeterminate">59        <Checkbox.Content>60          <Checkbox.Control>61            <Checkbox.Indicator62              render={(props, { indeterminate }) => (63                <span {...props}>64                  {indeterminate ? (65                    <svg66                      aria-hidden="true"67                      stroke="currentColor"68                      strokeWidth={3}69                      viewBox="0 0 24 24"70                    >71                      <line x1="21" x2="3" y1="12" y2="12" />72                    </svg>73                  ) : null}74                </span>75              )}76            />77          </Checkbox.Control>78          Indeterminate79        </Checkbox.Content>80      </Checkbox>81    </div>82  );83}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  control: {7    backgroundColor: "var(--success-soft)",8    "::before": {9      backgroundColor: {10        default: "var(--success)",11        ":is([data-slot='checkbox']:hover *)": "var(--success)",12        ":is([data-slot='checkbox'][data-invalid] *)": "var(--success)",13      },14    },15  },16  indicator: { color: "var(--success-foreground)" },17});18export function CustomStyles() {19  return (20    <Checkbox id="custom">21      <Checkbox.Content>22        <Checkbox.Control xstyle={styles.control}>23          <Checkbox.Indicator xstyle={styles.indicator} />24        </Checkbox.Control>25        Custom styled checkbox26      </Checkbox.Content>27    </Checkbox>28  );29}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全局 CSS

可使用 @layer components 指令自定义 Checkbox 组件类。了解更多。

1@layer components {2  .checkbox {3    @apply inline-flex gap-3 items-center;4  }5
6  .checkbox__control {7    @apply size-5 border-2 border-gray-400 rounded data-[selected=true]:bg-blue-500 data-[selected=true]:border-blue-500;8
9    /* Animated background indicator */10    &::before {11      @apply bg-accent pointer-events-none absolute inset-0 z-0 origin-center scale-50 rounded-md opacity-0 content-[''];12
13      transition:14        scale 200ms linear,15        opacity 200ms linear,16        background-color 200ms ease-out;17    }18
19    /* Show indicator when selected */20    &[data-selected="true"]::before {21      @apply scale-100 opacity-100;22    }23  }24
25  .checkbox__indicator {26    @apply text-white;27  }28
29  .checkbox__content {30    @apply items-center gap-3;31  }32}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

Checkbox 组件使用以下 CSS 类（查看源码样式）：

基础类 [!toc]

.checkbox - 基础复选框容器（字段）
.checkbox__content - 包裹控件与标签文本的可点击 label
.checkbox__control - 复选框控件框
.checkbox__indicator - 复选框勾选指示器

交互状态

复选框同时支持 CSS 伪类与 data 属性：

Selected：[data-selected="true"] 或 [aria-checked="true"]（显示勾选与背景色变化）
Indeterminate：[data-indeterminate="true"]（显示不确定状态的短横线）
Invalid：[data-invalid="true"] 或 [aria-invalid="true"]（显示 danger 色错误状态）
Hover：Checkbox.Control（按钮）上的 :hover 或 [data-hovered="true"]
Focus：按钮上的 :focus-visible 或 [data-focus-visible="true"]（控件上显示焦点环）
Disabled：字段上的 [data-disabled="true"]（降低透明度，包括帮助文本）
Pressed：:active 或 [data-pressed="true"]

API 参考

Checkbox

继承自 React Aria CheckboxField。

Prop	类型	默认值	描述
`isSelected`	`boolean`	`false`	是否选中
`defaultSelected`	`boolean`	`false`	默认是否选中（非受控）
`isIndeterminate`	`boolean`	`false`	是否处于不确定状态
`isDisabled`	`boolean`	`false`	是否禁用
`isInvalid`	`boolean`	`false`	是否无效
`isReadOnly`	`boolean`	`false`	是否只读
`isRequired`	`boolean`	`false`	是否必须选中
`validate`	`(value: boolean) => ValidationError \| true \| null \| undefined`	-	自定义验证函数
`validationBehavior`	`'native' \| 'aria'`	`'native'`	使用原生 HTML 表单验证还是 ARIA
`variant`	`"primary" \| "secondary"`	`"primary"`	视觉变体。`primary` 为默认带阴影样式；`secondary` 为低强调无阴影，适用于 Surface 内
`name`	`string`	-	提交 HTML 表单时 input 元素的名称
`value`	`string`	-	提交 HTML 表单时 input 元素的值
`onChange`	`(isSelected: boolean) => void`	-	值变化时的回调
`children`	`React.ReactNode \| (values: CheckboxFieldRenderProps) => React.ReactNode`	-	内容或字段 render prop
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, CheckboxFieldRenderProps>`	-	使用自定义 render 函数覆盖默认 DOM 元素

Checkbox.Content

可点击的 <label>，包裹控件与标签文本。将 Checkbox.Control 与 Label 放在其中；Description/FieldError 作为 Checkbox.Content 的兄弟节点。无标签的复选框可省略 Label，并在 Checkbox 上传递 aria-label。

Prop	类型	默认值	描述
`children`	`React.ReactNode \| (values: CheckboxButtonRenderProps) => React.ReactNode`	-	按钮内容（控件 + 标签）或按钮 render prop
`className`	`string \| (values: CheckboxButtonRenderProps) => string`	-	应用于可点击 label 的类

CheckboxFieldRenderProps

在根 Checkbox 上使用 render prop 时，提供以下字段级值：

Prop	类型	描述
`isSelected`	`boolean`	是否当前选中
`isIndeterminate`	`boolean`	是否处于不确定状态
`isDisabled`	`boolean`	是否禁用
`isReadOnly`	`boolean`	是否只读
`isInvalid`	`boolean`	是否无效
`isRequired`	`boolean`	是否必填

CheckboxButtonRenderProps

Checkbox.Control 与 Checkbox.Indicator 使用按钮级 render props（isHovered、isPressed、isFocusVisible 等）。将函数作为 Checkbox.Control 子节点或传给 Checkbox.Indicator 以访问它们。

Checkbox 复选框

用法

组件结构

示例

变体

全圆角

禁用

外部标签

带描述

默认选中

无效状态

受控组件

半选状态

表单集成

渲染属性

渲染函数

自定义指示器

自定义样式

Tailwind CSS

全局 CSS

样式参考

CSS 类

基础类 [!toc]

交互状态

API 参考

Checkbox

Checkbox.Content

CheckboxFieldRenderProps

CheckboxButtonRenderProps

相关组件