多选框

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

export default function App() {
  return <Checkbox>多选框</Checkbox>;
}

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

export default function App() {
  return <Checkbox defaultChecked>多选框</Checkbox>;
}

import { Checkbox } from "@resolid/react-ui";
import { useState } from "react";

export default function App() {
  const [checked, setChecked] = useState(false);

  return (
    <div className={"flex flex-col gap-2"}>
      <p>{checked ? <span className={"text-fg-success"}>你已成功订阅</span> : "你取消了订阅"}</p>
      <Checkbox value={"on"} checked={checked} onChange={setChecked}>
        订阅更新
      </Checkbox>
    </div>
  );
}

import { Checkbox, CheckboxGroup } from "@resolid/react-ui";
import { useState } from "react";

export default function App() {
  const [value, setValue] = useState(["React"]);

  return (
    <div className={"flex flex-col gap-2"}>
      <p>你选择了框架: {value.join(", ")}</p>
      <CheckboxGroup value={value} onChange={setValue} className={"gap-5"}>
        <Checkbox value={"React"}>React</Checkbox>
        <Checkbox value={"Angular"}>Angular</Checkbox>
        <Checkbox value={"Vue"}>Vue</Checkbox>
        <Checkbox value={"SolidJS"}>SolidJS</Checkbox>
        <Checkbox value={"Svelte"}>Svelte</Checkbox>
      </CheckboxGroup>
    </div>
  );
}

import { Checkbox } from "@resolid/react-ui";
import { useState } from "react";

export default function App() {
  const [values, setValues] = useState([false, false, false, false, false]);

  const allChecked = values.every(Boolean);
  const isIndeterminate = values.some(Boolean) && !allChecked;

  return (
    <div className={"flex flex-col gap-2"}>
      <Checkbox
        checked={allChecked}
        indeterminate={isIndeterminate}
        onChange={(checked) => setValues([checked, checked, checked, checked, checked])}
      >
        工作日
      </Checkbox>
      <div className={"inline-flex flex-row gap-5"}>
        {["周一", "周二", "周三", "周四", "周五"].map((day, index) => (
          <Checkbox
            key={day}
            checked={values[index]}
            onChange={(checked) => {
              setValues((prev) => {
                return [...prev.slice(0, index), !!checked, ...prev.slice(index + 1)];
              });
            }}
          >
            {day}
          </Checkbox>
        ))}
      </div>
    </div>
  );
}