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

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

@@ -25,6 +25,7 @@ import Crosshair from "./Icons/crosshair.svg";
 import PlusSquare from "./Icons/plusSquare.svg";
 import Cancel from "./Icons/cancel.svg";
 import ActionButton from "./Icons/actionButton.svg";
+import CheckMark from "./Icons/checkMark.svg";
 
 // Dataset
 import File from "./Icons/fileIcon.svg";
@@ -57,4 +58,5 @@ export default {
   playLeft: PlayLeft,
   timeline: Timeline,
   actionbutton: ActionButton,
+  checkmark: CheckMark,
 };