CheckboxGroup

Basic

Preview

Pick what you like

Apple

Banana

Orange

Others

Code

<CheckboxGroup
  label="Pick what you like"
  options={[
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    {
      value: "orange",
      label: "Orange",
    },
    {
      value: "others",
      label: "Others",
    },
  ]}
/>

Disabled

Preview

Pick what you like

Apple

Banana

Orange

Others

Code

<CheckboxGroup
  disabled={true}
  label="Pick what you like"
  options={[
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    {
      value: "orange",
      label: "Orange",
    },
    {
      value: "others",
      label: "Others",
    },
  ]}
/>

Controlled

Preview

Pick what you like

Apple

Banana

Orange

Others

Checked: []

Pick what you like

Apple

Banana

Orange

Others

Checked: ["orange","others"]

Code

import { useState } from "react";
import CheckboxGroup from "@/ui/CheckboxGroup";

const Controlled = () => {
  const [value1, setValue1] = useState<string[]>([]);
  const [value2, setValue2] = useState<string[]>(["orange", "others"]);

  return (
    <div className="flex flex-col gap-6">
      <div>
        <CheckboxGroup
          value={value1}
          label="Pick what you like"
          options={[
            { value: "apple", label: "Apple" },
            { value: "banana", label: "Banana" },
            {
              value: "orange",
              label: "Orange",
            },
            {
              value: "others",
              label: "Others",
            },
          ]}
          onChange={setValue1}
        />

        <p>Checked: {JSON.stringify(value1)}</p>
      </div>

      <div>
        <CheckboxGroup
          value={value2}
          label="Pick what you like"
          options={[
            { value: "apple", label: "Apple" },
            { value: "banana", label: "Banana" },
            {
              value: "orange",
              label: "Orange",
            },
            {
              value: "others",
              label: "Others",
            },
          ]}
          onChange={setValue2}
        />

        <p>Checked: {JSON.stringify(value2)}</p>
      </div>
    </div>
  );
};

export default Controlled;

Uncontrolled (with <form>)

Preview

Pick what you like

Apple

Banana

Orange

Others

Pick what you like

Cat

Dog

Others

Submit

formDataObj:

Code

import { useState, type FormEventHandler } from "react";
import _ from "lodash";
import CheckboxGroup from "@/ui/CheckboxGroup";

const Uncontrolled = () => {
  const [formDataObj, setFormDataObj] =
    useState<Record<string, FormDataEntryValue>>();

  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
    event.preventDefault();

    const formData = new FormData(event.currentTarget);
    const updates: Record<string, FormDataEntryValue> = {};

    [...formData.entries()].forEach(([key, value]) => {
      /**
       * Q: Why use `_.set` instead of an assignment?
       * A: `_.set` can convert `key` like `a.0.b` to `a: [{ b: '' }]`, which is very convenient for formData (e.g. array) handling
       * */
      _.set(updates, key, value);
    });

    setFormDataObj(updates);
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-6">
      <CheckboxGroup
        // required={true} // NOTE: `required` is not supported
        name="pickedFruit"
        label="Pick what you like"
        options={[
          { value: "apple", label: "Apple" },
          { value: "banana", label: "Banana" },
          {
            value: "orange",
            label: "Orange",
          },
          {
            value: "others",
            label: "Others",
          },
        ]}
      />

      <CheckboxGroup
        name="pickedAnimal"
        defaultValue={["dog", "others"]}
        label="Pick what you like"
        options={[
          { value: "cat", label: "Cat" },
          { value: "dog", label: "Dog" },
          {
            value: "others",
            label: "Others",
          },
        ]}
      />

      <button type="submit" className="border">
        Submit
      </button>

      <p>formDataObj: {JSON.stringify(formDataObj)}</p>
    </form>
  );
};

export default Uncontrolled;