chore(web): Add CheckboxField component

web/src/beta/components/CheckboxField/index.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import CheckBoxField from ".";
+
+const meta: Meta<typeof CheckBoxField> = {
+  component: CheckBoxField,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckBoxField>;
+
+export const Default: Story = {
+  args: {
+    label: "takanawa_3D_Tiles",
+    checked: false,
+  },
+};

web/src/beta/components/CheckboxField/index.tsx

@@ -0,0 +1,54 @@
+import type { FC } from "react";
+
+import { styled, useTheme } from "@reearth/services/theme";
+
+import Icon from "../Icon";
+import Text from "../Text";
+
+export type Props = {
+  onClick?: (value: boolean) => void;
+  checked?: boolean;
+  label: string;
+};
+
+const CheckBoxField: FC<Props> = ({ onClick, checked, label }) => {
+  const theme = useTheme();
+  return (
+    <Field>
+      <BoxFeild onClick={() => onClick?.(checked !== undefined ? checked : false)}>
+        {checked && <CheckMark icon="checkmark" />}
+      </BoxFeild>
+      {label && (
+        <Text size="footnote" color={theme.general.content.main}>
+          {label}
+        </Text>
+      )}
+    </Field>
+  );
+};
+
+const Field = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  height: 20px;
+`;
+
+const BoxFeild = styled.button`
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border: 1px solid ${({ theme }) => theme.general.content.weak};
+  border-radius: 4px;
+`;
+
+const CheckMark = styled(Icon)`
+  padding-left: 15%;
+  padding-right: 10%;
+  padding-top: 25%;
+  padding-bottom: 20.83%;
+  color: ${({ theme }) => theme.general.content.main};
+`;
+
+export default CheckBoxField;

web/src/beta/components/Icon/icons.ts

@@ -27,6 +27,7 @@ import PlusSquare from "./Icons/plusSquare.svg";
 import Cancel from "./Icons/cancel.svg";
 import ActionButton from "./Icons/actionButton.svg";
 import Help from "./Icons/help.svg";
+import CheckMark from "./Icons/checkMark.svg";
 
 // Dataset
 import File from "./Icons/fileIcon.svg";
@@ -73,4 +74,5 @@ export default {
   logout: Logout,
   workspaceAdd: WorkspaceAdd,
   workspaces: Workspaces,
+  checkmark: CheckMark,
 };