shadcn_ui-checkbox

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shadcn UI — Checkbox

Shadcn UI — 复选框

Instructions

使用说明

ShadCheckbox

is a control that toggles between checked and unchecked. Use

value

and

onChanged

; optional

label

and

sublabel

. For forms use

ShadCheckboxFormField

with

id

validator

, and form state.

ShadCheckbox

是一种可在选中和未选中状态间切换的控件。使用

value

和

onChanged

属性；可选

label

和

sublabel

属性。表单场景下，请使用带有

id

、

validator

和表单状态的

ShadCheckboxFormField

。

Standalone

独立使用

dart

ShadCheckbox(
  value: value,
  onChanged: (v) => setState(() => value = v),
  label: const Text('Accept terms and conditions'),
  sublabel: const Text(
    'You agree to our Terms of Service and Privacy Policy.',
  ),
)

dart

ShadCheckbox(
  value: value,
  onChanged: (v) => setState(() => value = v),
  label: const Text('Accept terms and conditions'),
  sublabel: const Text(
    'You agree to our Terms of Service and Privacy Policy.',
  ),
)

Form field

表单字段

dart

ShadCheckboxFormField(
  id: 'terms',
  initialValue: false,
  inputLabel: const Text('I accept the terms and conditions'),
  onChanged: (v) {},
  inputSublabel: const Text('You agree to our Terms and Conditions'),
  validator: (v) {
    if (!v) return 'You must accept the terms and conditions';
    return null;
  },
)

dart

ShadCheckboxFormField(
  id: 'terms',
  initialValue: false,
  inputLabel: const Text('I accept the terms and conditions'),
  onChanged: (v) {},
  inputSublabel: const Text('You agree to our Terms and Conditions'),
  validator: (v) {
    if (!v) return 'You must accept the terms and conditions';
    return null;
  },
)