en-US

Realize the control of the checkbox group.

zh-CN

实现对多选框组的控制。

import { useState } from 'react';

import { DCheckbox } from '@react-devui/ui';

export default function Demo() {
  const [value, setValue] = useState([2]);
  const state = value.length === 0 ? false : value.length === 3 ? true : 'mixed';

  return (
    <>
      <DCheckbox
        dModel={state !== 'mixed' ? state : undefined}
        dIndeterminate={state === 'mixed'}
        onModelChange={(checked) => {
          setValue(checked ? [1, 2, 3] : []);
        }}
      >
        {state === true ? 'Clear all' : 'Select all'}
      </DCheckbox>
      <br />
      <br />
      <DCheckbox.Group
        dList={[1, 2, 3].map((n) => ({
          label: `Checkbox ${n}`,
          value: n,
        }))}
        dModel={value}
        onModelChange={setValue}
      />
    </>
  );
}