复选框

安装

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

安装以下依赖：

npm install radix-ui

将以下代码复制到你的项目中。

View complete source: components/ui/checkbox.tsx

根据项目配置更新导入路径。

用法

import { Checkbox } from "@/components/ui/checkbox"

<Checkbox />

Checked State

Use defaultChecked for uncontrolled checkboxes, or checked and onCheckedChange to control the state.

import * as React from "react"

export function Example() {
  const [checked, setChecked] = React.useState(false)

  return <Checkbox checked={checked} onCheckedChange={setChecked} />
}

Invalid State

Set aria-invalid on the checkbox and data-invalid on the field wrapper to show the invalid styles.

Basic

Pair the checkbox with Field and FieldLabel for proper layout and labeling.

Description

Use FieldContent and FieldDescription for helper text.

Disabled

Use the disabled prop to prevent interaction and add the data-disabled attribute to the <Field> component for disabled styles.

Group

Use multiple fields to create a checkbox list.

Table

从右到左布局

To enable RTL support in JGuang UI, see the RTL configuration guide.

API 参考

See the Radix UI documentation for more information.