import { Checkbox } from "@ls-design/ui-react";

export default () => {
  const [checked, setCheck] = useState(true);

  const handleChange = () => {
    setCheck(() => !checked);
  };

  return (
    <>
      <Checkbox checked={checked} onChange={handleChange}>
        Apple
      </Checkbox>
      <Checkbox checked={false}>Orange</Checkbox>
    </>
  );
};

<Checkbox checked="{true}">圆形(默认)</Checkbox>
<Checkbox checked="{true}" shape="square">方形</Checkbox>

<Checkbox checked="{true}" shape="round" size="big">默认形状-大</Checkbox>
<Checkbox checked="{true}" shape="square" size="big">方形-大</Checkbox>

<Checkbox checked="{true}" disabled>已选-禁用</Checkbox>
<Checkbox checked="{true}" disabled>未选-禁用</Checkbox>

export default () => {
  const [groupValue, setGroupValue] = useState(["苹果", "橘子"]);

  const onGroupChange = ({ detail }) => {
    setGroupValue(() => detail.value);
  };

  return (
    <>
      <CheckboxGroup value={groupValue.join()} onChange={onGroupChange}>
        <Checkbox name="apple">苹果</Checkbox>
        <Checkbox name="warning" disabled>
          橘子
        </Checkbox>
        <Checkbox name="banana">香蕉</Checkbox>
      </CheckboxGroup>
    </>
  );
};