Checkbox

Basic

Preview

Please check the box if you have read and understood the statement.

Code

<Checkbox label="Please check the box if you have read and understood the statement." />

Disabled

Preview

Please check the box if you have read and understood the statement.

Code

<Checkbox
  label="Please check the box if you have read and understood the statement."
  disabled={true}
/>

Controlled

Preview

Please check the box if you have read and understood the statement.

Checked:

Please check the box if you have read and understood the statement.

Checked: true

Code

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

const ControlledWithChecked = () => {
  const [checked1, setChecked1] = useState<boolean>();
  const [checked2, setChecked2] = useState(true);

  return (
    <div className="flex flex-col gap-6">
      <div>
        <Checkbox
          checked={checked1}
          onChange={(e) => setChecked1(e.target.checked)}
          label="Please check the box if you have read and understood the statement."
        />

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

      <div>
        <Checkbox
          checked={checked2}
          onChange={(e) => setChecked2(e.target.checked)}
          label="Please check the box if you have read and understood the statement."
        />

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

export default ControlledWithChecked;

Uncontrolled (with <form>)

Uncontrolled with build-in value 'on'

Preview

Please check the box if you have read and understood the statement.

Please check the box if you like strawberries.

Submit

formDataObj:

Code

import { useState, type FormEventHandler } from "react";
import Checkbox from "@/ui/Checkbox";

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

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

    const formData = new FormData(event.currentTarget);
    const updates = Object.fromEntries(formData);

    setFormDataObj(updates);
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-6">
      <Checkbox
        required
        name="statementReadToggle"
        label="Please check the box if you have read and understood the statement."
      />

      <Checkbox
        defaultChecked
        name="strawberryLoverToggle"
        label="Please check the box if you like strawberries."
      />

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

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

export default Uncontrolled;

Uncontrolled with custom value

Preview

Please check the box if you have read and understood the statement.

Please check the box if you like strawberries.

Submit

formDataObj:

Code

import { useState, type FormEventHandler } from "react";
import Checkbox from "@/ui/Checkbox";

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

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

    const formData = new FormData(event.currentTarget);
    const updates = Object.fromEntries(formData);

    setFormDataObj(updates);
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-6">
      <Checkbox
        required
        value="yes"
        name="statementReadToggle"
        label="Please check the box if you have read and understood the statement."
      />

      <Checkbox
        defaultChecked
        value="yes"
        name="strawberryLoverToggle"
        label="Please check the box if you like strawberries."
      />

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

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

export default UncontrolledWithCustomValue;