chore(web): Add CheckboxField component (#508)

Co-authored-by: 長田淳史 <>
Co-authored-by: koji endo <[email protected]>
Co-authored-by: KaWaite <[email protected]>

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,50 @@
+import Icon from "@reearth/beta/components/Icon";
+import Text from "@reearth/beta/components/Text";
+import { styled, useTheme } from "@reearth/services/theme";
+
+export type Props = {
+  onClick?: (value: boolean) => void;
+  checked?: boolean;
+  label: string;
+};
+
+const CheckBoxField: React.FC<Props> = ({ onClick, checked, label }) => {
+  const theme = useTheme();
+  return (
+    <Field onClick={() => onClick?.(!checked)}>
+      <BoxField>{checked && <CheckMark icon="checkmark" />}</BoxField>
+      {label && (
+        <Text size="footnote" color={theme.general.content.main}>
+          {label}
+        </Text>
+      )}
+    </Field>
+  );
+};
+
+const Field = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  height: 20px;
+`;
+
+const BoxField = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border: 1px solid ${({ theme }) => theme.general.content.weak};
+  border-radius: 4px;
+`;
+
+const CheckMark = styled(Icon)`
+  width: 15px;
+  height: 10.83px;
+  color: ${({ theme }) => theme.general.content.main};
+`;
+
+export default CheckBoxField;

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

@@ -28,6 +28,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";
@@ -81,4 +82,5 @@ export default {
   logout: Logout,
   workspaceAdd: WorkspaceAdd,
   workspaces: Workspaces,
+  checkmark: CheckMark,
 };