CheckboxGroup

1import { CheckboxGroup } from "piece-ui";

1import { CheckboxGroup } from "piece-ui";
2
3export default function Example() {
4  return (
5    <CheckboxGroup
6      options={["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]}
7      defaultValue={["Monday", "Tuesday"]}
8      onChange={(days) => console.log(days)}
9    />
10  );
11}

1import { useState } from "react";
2import { CheckboxGroup } from "piece-ui";
3
4const DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
5
6export default function Example() {
7  const [days, setDays] = useState(["Monday", "Tuesday"]);
8
9  return (
10    <>
11      <CheckboxGroup options={DAYS} value={days} onChange={setDays} />
12      <p>Working days: {days.join(", ")}</p>
13    </>
14  );
15}

1import { CheckboxGroup } from "piece-ui";
2
3export default function Example() {
4  return (
5    <CheckboxGroup
6      options={["Monday", "Tuesday", "Wednesday"]}
7      defaultValue={["Monday"]}
8      accentColor="#10b981"
9      labelColor="#374151"
10      size="lg"
11      weight="semibold"
12    />
13  );
14}

1import { CheckboxGroup } from "piece-ui";
2
3export default function Example() {
4  return (
5    <CheckboxGroup
6      options={[
7        "Monday",
8        "Tuesday",
9        { label: "Saturday", disabled: true },
10        { label: "Sunday", disabled: true },
11      ]}
12      defaultValue={["Monday"]}
13    />
14  );
15}

1import { useState } from "react";
2import { CheckboxGroup } from "piece-ui";
3
4const DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
5
6// CheckboxGroup renders ONLY the list. The card, heading and button below
7// are plain markup you own — compose whatever you need around it.
8export default function WorkingDaysStep({ onContinue }) {
9  const [days, setDays] = useState(["Monday", "Tuesday"]);
10
11  return (
12    <div className="rounded-3xl bg-white p-7">
13      <h3 className="text-lg font-bold text-gray-900">Set Company Working days</h3>
14      <p className="mt-1 text-gray-500">
15        Select your company working days, and uncheck non-working days
16      </p>
17
18      <div className="my-6">
19        <CheckboxGroup
20          options={DAYS}
21          value={days}
22          onChange={setDays}
23          accentColor="#3b82f6"
24          labelColor="#374151"
25          borderColor="#d1d5db"
26          weight="medium"
27        />
28      </div>
29
30      <button
31        onClick={() => onContinue(days)}
32        className="w-full rounded-full bg-[#3b82f6] py-3.5 font-bold text-white"
33      >
34        Continue
35      </button>
36    </div>
37  );
38}