Checkbox

A customizable checkbox component to toggle options on and off.

Galaxy Checkbox

An intergalactic checkbox for cosmic forms.

Preview

John Clapton

Peter Mayer

Eric King

import React from "react";

const Checkbox = () => {
  return (
    <div>
      <fieldset>
        <legend className="sr-only">Checkboxes</legend>

        <div className="space-y-2">
          <label
            htmlFor="Option1"
            className="flex cursor-pointer items-start gap-4"
          >
            <div className="flex items-center">
              <input
                type="checkbox"
                className="size-4 rounded border-gray-300"
                id="Option1"
              />
            </div>
            <div>
              <strong className="font-medium text-gray-900">John Clapton</strong>
            </div>
          </label>

          <label
            htmlFor="Option2"
            className="flex cursor-pointer items-start gap-4"
          >
            <div className="flex items-center">
              <input
                type="checkbox"
                className="size-4 rounded border-gray-300"
                id="Option2"
              />
            </div>
            <div>
              <strong className="font-medium text-gray-900">Peter Mayer</strong>
            </div>
          </label>

          <label
            htmlFor="Option3"
            className="flex cursor-pointer items-start gap-4"
          >
            <div className="flex items-center">
              <input
                type="checkbox"
                className="size-4 rounded border-gray-300"
                id="Option3"
              />
            </div>
            <div>
              <strong className="font-medium text-gray-900">Eric King</strong>
            </div>
          </label>
        </div>
      </fieldset>
    </div>
  );
};

export default Checkbox;

Usage Example

import React from "react";
import CheckBox from "./components/comp/CheckBox/GalaxyCheckBox";

const App = () => {
  return (
    <div>
      <CheckBox />
    </div>
  );
};

export default App;