From e9f4dcb1f7e52c93666f3cf66d35fb2e34a1bbf9 Mon Sep 17 00:00:00 2001
From: takanorip <takanori0170@gmail.com>
Date: Wed, 27 Sep 2023 00:06:55 +0900
Subject: [PATCH 1/6] add form elements

---
 .../RadioButton/RadioButton.module.css        | 43 ++++++++++++
 src/components/RadioButton/RadioButton.tsx    | 28 ++++++++
 src/components/Select/Select.module.css       | 65 +++++++++++++++++++
 src/components/Select/Select.tsx              | 27 ++++++++
 src/components/TextArea/TextArea.module.css   | 29 +++++++++
 src/components/TextArea/TextArea.tsx          | 13 ++++
 6 files changed, 205 insertions(+)
 create mode 100644 src/components/RadioButton/RadioButton.module.css
 create mode 100644 src/components/RadioButton/RadioButton.tsx
 create mode 100644 src/components/Select/Select.module.css
 create mode 100644 src/components/Select/Select.tsx
 create mode 100644 src/components/TextArea/TextArea.module.css
 create mode 100644 src/components/TextArea/TextArea.tsx

diff --git a/src/components/RadioButton/RadioButton.module.css b/src/components/RadioButton/RadioButton.module.css
new file mode 100644
index 00000000..a2edf0e0
--- /dev/null
+++ b/src/components/RadioButton/RadioButton.module.css
@@ -0,0 +1,43 @@
+.icon {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  background-color: var(--color-background-white);
+  border: 2px solid var(--color-border);
+  border-radius: 24px;
+}
+
+.icon::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  content: '';
+  border-radius: 16px;
+  transform: translate(-50%, -50%);
+}
+
+.radio {
+  position: absolute;
+  opacity: 0;
+}
+
+.radio:checked + label .icon {
+  border-color: var(--color-primary);
+}
+
+.radio:checked + label .icon::before {
+  background: var(--color-primary);
+}
+
+/* 詳細度を上げるために:focus-visibleを複数指定 */
+.radio:focus-visible:focus-visible + label .icon {
+  border-color: var(--color-accent);
+}
+
+.label {
+  display: flex;
+  gap: var(--size-spacing-xs);
+  align-items: center;
+}
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
new file mode 100644
index 00000000..4f5886e7
--- /dev/null
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import styles from './RadioButton.module.scss';
+
+type Props = Required<
+  Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'value' | 'checked' | 'children'>
+> &
+  React.InputHTMLAttributes<HTMLInputElement>;
+
+export const RadioButton: FC<Props> = ({ checked, onChange, value, id, name, children, ...otherProps }) => {
+  return (
+    <div className={styles.container}>
+      <input
+        type="radio"
+        id={id}
+        checked={checked}
+        name={name}
+        value={value}
+        className={styles.radio}
+        onChange={onChange}
+        {...otherProps}
+      />
+      <label htmlFor={id} className={styles.label}>
+        <span className={styles.icon} />
+        {children}
+      </label>
+    </div>
+  );
+};
diff --git a/src/components/Select/Select.module.css b/src/components/Select/Select.module.css
new file mode 100644
index 00000000..111a0dff
--- /dev/null
+++ b/src/components/Select/Select.module.css
@@ -0,0 +1,65 @@
+.wrapper {
+  position: relative;
+}
+
+.select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 54px;
+  padding: 0 64px 0 16px;
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--color-text-main);
+  border: none;
+  border: 2px solid var(--color-border);
+  border-radius: 8px;
+  transition: border-color 0.3s var(--ease-out-quint);
+  appearance: none;
+  caret-color: var(--color-primary);
+}
+
+.select::placeholder {
+  color: var(--color-text-placeholder);
+}
+
+.select:focus {
+  border-color: var(--color-primary);
+}
+
+@media (pointer: fine) {
+  .select:hover {
+    border: 2px solid var(--color-primary);
+  }
+}
+
+.icon {
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  width: 24px;
+  height: 24px;
+  color: var(--color-primary);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.disabled .select {
+  color: var(--color-text-sub);
+  background-color: var(--color-background-gray);
+  border-color: var(--color-border);
+}
+
+.disabled .icon {
+  color: var(--color-text-sub);
+}
+
+.isInvalid .select {
+  background: var(--color-background-accent-darken);
+  border-color: var(--color-alert-darken);
+}
+
+.isInvalid .icon {
+  color: var(--color-alert-darken);
+}
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
new file mode 100644
index 00000000..bfbed5eb
--- /dev/null
+++ b/src/components/Select/Select.tsx
@@ -0,0 +1,27 @@
+import { UnfoldMoreIcon } from '@ubie/ubie-icons';
+import clsx from 'clsx';
+import { FC, forwardRef, InputHTMLAttributes } from 'react';
+import styles from './Select.module.scss';
+
+type Props = {
+  isInvalid?: boolean;
+  disabled?: boolean;
+  className?: string;
+} & InputHTMLAttributes<HTMLSelectElement>;
+
+const Select: FC<Props> = forwardRef<HTMLSelectElement, Props>(
+  ({ isInvalid = false, disabled = false, children, className, ...props }, ref) => {
+    return (
+      <div className={clsx({ [styles.isInvalid]: isInvalid, [styles.disabled]: disabled }, styles.wrapper, className)}>
+        <select {...props} disabled={disabled} className={styles.select} ref={ref}>
+          {children}
+        </select>
+        <UnfoldMoreIcon aria-hidden className={styles.icon} />
+      </div>
+    );
+  },
+);
+
+Select.displayName = 'Select';
+
+export { Select };
diff --git a/src/components/TextArea/TextArea.module.css b/src/components/TextArea/TextArea.module.css
new file mode 100644
index 00000000..747ad7b8
--- /dev/null
+++ b/src/components/TextArea/TextArea.module.css
@@ -0,0 +1,29 @@
+.textArea {
+  width: 100%;
+  padding: var(--size-spacing-md) var(--size-spacing-sm) 0.875rem;
+  font-size: var(--text-body-md-narrow-size);
+  font-weight: bold;
+  line-height: var(--text-body-md-narrow-line);
+  color: var(--color-text-main);
+  text-align: inherit;
+  background-color: var(--color-background-gray);
+  border: none;
+  border-bottom: 2px solid var(--color-border);
+  border-radius: 8px 8px 0 0;
+  appearance: none;
+  caret-color: var(--color-primary);
+}
+
+.textArea::placeholder {
+  color: var(--color-text-placeholder);
+}
+
+.textArea:focus {
+  border-bottom: 2px solid var(--color-primary);
+  outline: none;
+}
+
+.textArea.isInvalid {
+  background: var(--color-background-accent-darken);
+  border-bottom: 2px solid var(--color-alert-darken);
+}
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
new file mode 100644
index 00000000..a4965efa
--- /dev/null
+++ b/src/components/TextArea/TextArea.tsx
@@ -0,0 +1,13 @@
+import clsx from 'clsx';
+import { FC, TextareaHTMLAttributes } from 'react';
+import styles from './TextArea.module.scss';
+
+type Props = {
+  isInvalid?: boolean;
+} & TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const TextArea: FC<Props> = ({ isInvalid = false, className, ...props }) => {
+  const _className = clsx({ [styles.isInvalid]: isInvalid }, styles.textArea, className);
+
+  return <textarea {...props} className={_className} />;
+};

From c4c981b5d0f956b340e1c5434bbb80b1defccf04 Mon Sep 17 00:00:00 2001
From: takanorip <takanori0170@gmail.com>
Date: Wed, 27 Sep 2023 00:22:48 +0900
Subject: [PATCH 2/6] add stories

---
 src/index.ts                        |  3 +++
 src/stories/RadioButton.stories.tsx | 33 +++++++++++++++++++++++++++++
 src/stories/Select.stories.tsx      | 33 +++++++++++++++++++++++++++++
 src/stories/TextArea.stories.tsx    | 15 +++++++++++++
 4 files changed, 84 insertions(+)
 create mode 100644 src/stories/RadioButton.stories.tsx
 create mode 100644 src/stories/Select.stories.tsx
 create mode 100644 src/stories/TextArea.stories.tsx

diff --git a/src/index.ts b/src/index.ts
index 2f0bb4fa..9149fb94 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,6 +6,9 @@ export { LinkButton } from './components/Button/LinkButton';
 export { Checkbox } from './components/Checkbox/Checkbox';
 export { Input } from './components/Input/Input';
 export { LinkCard } from './components/LinkCard/LinkCard';
+export { RadioButton } from './components/RadioButton/RadioButton';
+export { Select } from './components/Select/Select';
+export { TextArea } from './components/TextArea/TextArea';
 export { RadioCard } from './components/RadioCard/RadioCard';
 export { Text } from './components/Text/Text';
 export { Stack } from './components/Stack/Stack';
diff --git a/src/stories/RadioButton.stories.tsx b/src/stories/RadioButton.stories.tsx
new file mode 100644
index 00000000..45870802
--- /dev/null
+++ b/src/stories/RadioButton.stories.tsx
@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ChangeEventHandler, useState, useCallback } from 'react';
+import { Select } from '../';
+
+export default {
+  component: Select,
+} as Meta<typeof Select>;
+
+const options = ['option1', 'option2', 'option3'];
+
+const defaultArgs = {
+  isInvalid: false,
+  disabled: false,
+};
+
+export const Default: StoryObj<typeof Select> = {
+  render: (args) => {
+    const [selectedItem, setSelectedItem] = useState(options[0]);
+
+    const onChange: ChangeEventHandler<HTMLSelectElement> = useCallback((event) => {
+      setSelectedItem(event.target.value);
+    }, []);
+
+    return (
+      <Select {...args} value={selectedItem} onChange={onChange}>
+        {options.map((o) => (
+          <option key={o}>{o}</option>
+        ))}
+      </Select>
+    );
+  },
+  args: defaultArgs,
+};
diff --git a/src/stories/Select.stories.tsx b/src/stories/Select.stories.tsx
new file mode 100644
index 00000000..45870802
--- /dev/null
+++ b/src/stories/Select.stories.tsx
@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ChangeEventHandler, useState, useCallback } from 'react';
+import { Select } from '../';
+
+export default {
+  component: Select,
+} as Meta<typeof Select>;
+
+const options = ['option1', 'option2', 'option3'];
+
+const defaultArgs = {
+  isInvalid: false,
+  disabled: false,
+};
+
+export const Default: StoryObj<typeof Select> = {
+  render: (args) => {
+    const [selectedItem, setSelectedItem] = useState(options[0]);
+
+    const onChange: ChangeEventHandler<HTMLSelectElement> = useCallback((event) => {
+      setSelectedItem(event.target.value);
+    }, []);
+
+    return (
+      <Select {...args} value={selectedItem} onChange={onChange}>
+        {options.map((o) => (
+          <option key={o}>{o}</option>
+        ))}
+      </Select>
+    );
+  },
+  args: defaultArgs,
+};
diff --git a/src/stories/TextArea.stories.tsx b/src/stories/TextArea.stories.tsx
new file mode 100644
index 00000000..69ea6202
--- /dev/null
+++ b/src/stories/TextArea.stories.tsx
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TextArea } from '../';
+
+export default {
+  component: TextArea,
+} as Meta<typeof TextArea>;
+
+const defaultArgs = {
+  isInvalid: false,
+};
+
+export const Default: StoryObj<typeof TextArea> = {
+  render: (args) => <TextArea {...args} />,
+  args: defaultArgs,
+};

From a8119f461708505549b73a349845a3d6cfe6396b Mon Sep 17 00:00:00 2001
From: takanorip <takanori0170@gmail.com>
Date: Wed, 27 Sep 2023 04:01:20 +0900
Subject: [PATCH 3/6] fix components style

---
 src/components/Checkbox/Checkbox.module.css   | 43 +++++++++++++---
 src/components/Checkbox/Checkbox.tsx          | 12 +++--
 .../RadioButton/RadioButton.module.css        | 51 +++++++++++++++++--
 src/components/RadioButton/RadioButton.tsx    | 28 +++++++---
 src/components/Select/Select.tsx              |  2 +-
 src/components/TextArea/TextArea.tsx          |  2 +-
 src/stories/Checkbox.stories.tsx              | 16 +++---
 src/stories/Input.stories.tsx                 |  9 +++-
 src/stories/RadioButton.stories.tsx           | 36 ++++++++-----
 9 files changed, 150 insertions(+), 49 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.module.css b/src/components/Checkbox/Checkbox.module.css
index 14676cfe..2a7de821 100644
--- a/src/components/Checkbox/Checkbox.module.css
+++ b/src/components/Checkbox/Checkbox.module.css
@@ -1,6 +1,9 @@
 .container {
+  display: flex;
+  align-items: center;
+  gap: var(--size-spacing-xs);
   user-select: none;
-  font-size: 12px;
+  cursor: pointer;
 }
 
 .checkbox {
@@ -15,13 +18,30 @@
 
 .checkIconContainer {
   display: inline-block;
-  width: 16px;
-  height: 16px;
-  margin-right: 6px;
-  border: 2px solid var(--color-primary);
-  border-radius: 4px;
-  font-size: 12px;
+  border: 2px solid var(--color-ubie-black-400);
+  border-radius: var(--radius-sm);
   transition: background-color 200ms;
+  box-sizing: border-box;
+}
+
+.container.medium {
+  font-size: var(--text-body-md-tight-size);
+  line-height: var(--text-body-md-tight-line);
+}
+
+.container.small {
+  font-size: var(--text-body-sm-tight-size);
+  line-height: var(--text-body-sm-tight-line);
+}
+
+.medium .checkIconContainer {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.small .checkIconContainer {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .checkIcon {
@@ -29,8 +49,17 @@
   color: #fff;
 }
 
+.medium .checkIcon {
+  font-size: 1.25rem;
+}
+
+.small .checkIcon {
+  font-size: 1rem;
+}
+
 .container input:checked + .checkIconContainer {
   background-color: var(--color-primary);
+  border-color: var(--color-primary);
 }
 
 .container input:checked + .checkIconContainer .checkIcon {
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 55f0ad8b..a0da67f9 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,16 +1,18 @@
 'use client';
 
 import { CheckAIcon } from '@ubie/ubie-icons';
-import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { FC, PropsWithChildren, InputHTMLAttributes } from 'react';
 import styles from './Checkbox.module.css';
 
 type Props = {
-  children: ReactNode;
-};
+  size?: 'medium' | 'small';
+} & InputHTMLAttributes<HTMLInputElement> &
+  PropsWithChildren;
 
-export const Checkbox: FC<Props> = ({ children }) => {
+export const Checkbox: FC<Props> = ({ size = 'medium', children }) => {
   return (
-    <label className={styles.container}>
+    <label className={clsx(styles.container, styles[size])}>
       <input type="checkbox" className={styles.checkbox} />
       <span className={styles.checkIconContainer}>
         <CheckAIcon className={styles.checkIcon} />
diff --git a/src/components/RadioButton/RadioButton.module.css b/src/components/RadioButton/RadioButton.module.css
index a2edf0e0..1f5f0e56 100644
--- a/src/components/RadioButton/RadioButton.module.css
+++ b/src/components/RadioButton/RadioButton.module.css
@@ -1,23 +1,41 @@
 .icon {
   position: relative;
-  width: 24px;
-  height: 24px;
   background-color: var(--color-background-white);
-  border: 2px solid var(--color-border);
+  border: 2px solid var(--color-ubie-black-400);
   border-radius: 24px;
+  box-sizing: border-box;
+  flex: none;
+}
+
+.medium .icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.small .icon {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .icon::before {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 16px;
-  height: 16px;
   content: '';
   border-radius: 16px;
   transform: translate(-50%, -50%);
 }
 
+.medium .icon::before {
+  width: 1rem;
+  height: 1rem;
+}
+
+.small .icon::before {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
 .radio {
   position: absolute;
   opacity: 0;
@@ -31,6 +49,18 @@
   background: var(--color-primary);
 }
 
+.radio:disabled + label {
+  color: var(--color-text-disabled);
+}
+
+.radio:disabled + label > .icon {
+  border-color: var(--color-text-disabled);
+}
+
+.radio:checked:disabled + label > .icon::before {
+  background: var(--color-text-disabled);
+}
+
 /* 詳細度を上げるために:focus-visibleを複数指定 */
 .radio:focus-visible:focus-visible + label .icon {
   border-color: var(--color-accent);
@@ -40,4 +70,15 @@
   display: flex;
   gap: var(--size-spacing-xs);
   align-items: center;
+  cursor: pointer;
+}
+
+.medium .label {
+  font-size: var(--text-body-md-tight-size);
+  line-height: var(--text-body-md-tight-line);
+}
+
+.small .label {
+  font-size: var(--text-body-sm-tight-size);
+  line-height: var(--text-body-sm-tight-line);
 }
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index 4f5886e7..38748c9c 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -1,14 +1,28 @@
-import { FC } from 'react';
-import styles from './RadioButton.module.scss';
+import clsx from 'clsx';
+import { FC, InputHTMLAttributes } from 'react';
+import styles from './RadioButton.module.css';
 
-type Props = Required<
-  Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'value' | 'checked' | 'children'>
+type RadioProps = Required<
+  Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'value' | 'checked' | 'children'>
 > &
-  React.InputHTMLAttributes<HTMLInputElement>;
+  InputHTMLAttributes<HTMLInputElement>;
 
-export const RadioButton: FC<Props> = ({ checked, onChange, value, id, name, children, ...otherProps }) => {
+type Props = {
+  size?: 'medium' | 'small';
+} & RadioProps;
+
+export const RadioButton: FC<Props> = ({
+  size = 'medium',
+  checked,
+  onChange,
+  value,
+  id,
+  name,
+  children,
+  ...otherProps
+}) => {
   return (
-    <div className={styles.container}>
+    <div className={clsx(styles.container, styles[size])}>
       <input
         type="radio"
         id={id}
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index bfbed5eb..0cf515c6 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,7 +1,7 @@
 import { UnfoldMoreIcon } from '@ubie/ubie-icons';
 import clsx from 'clsx';
 import { FC, forwardRef, InputHTMLAttributes } from 'react';
-import styles from './Select.module.scss';
+import styles from './Select.module.css';
 
 type Props = {
   isInvalid?: boolean;
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
index a4965efa..ba37a687 100644
--- a/src/components/TextArea/TextArea.tsx
+++ b/src/components/TextArea/TextArea.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { FC, TextareaHTMLAttributes } from 'react';
-import styles from './TextArea.module.scss';
+import styles from './TextArea.module.css';
 
 type Props = {
   isInvalid?: boolean;
diff --git a/src/stories/Checkbox.stories.tsx b/src/stories/Checkbox.stories.tsx
index 1e577393..fe69f4b2 100644
--- a/src/stories/Checkbox.stories.tsx
+++ b/src/stories/Checkbox.stories.tsx
@@ -1,15 +1,17 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Checkbox } from '../';
+import { Checkbox, Stack } from '../';
 
 export default {
   component: Checkbox,
 } as Meta<typeof Checkbox>;
 
-const defaultArgs = {
-  children: 'Checkbox',
-};
-
 export const Default: StoryObj<typeof Checkbox> = {
-  render: (args) => <Checkbox {...args} />,
-  args: defaultArgs,
+  render: () => {
+    return (
+      <Stack spacing="xs">
+        <Checkbox>Medium</Checkbox>
+        <Checkbox size="small">Small</Checkbox>
+      </Stack>
+    );
+  },
 };
diff --git a/src/stories/Input.stories.tsx b/src/stories/Input.stories.tsx
index 54d229d0..90c4c7b3 100644
--- a/src/stories/Input.stories.tsx
+++ b/src/stories/Input.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Input } from '..';
+import { Input, Stack } from '..';
 
 export default {
   component: Input,
@@ -11,6 +11,11 @@ const defaultArgs = {
 };
 
 export const Default: StoryObj<typeof Input> = {
-  render: (args) => <Input {...args} />,
+  render: (args) => (
+    <Stack spacing="xs">
+      <Input {...args} />
+      <Input {...args} isInvalid />
+    </Stack>
+  ),
   args: defaultArgs,
 };
diff --git a/src/stories/RadioButton.stories.tsx b/src/stories/RadioButton.stories.tsx
index 45870802..9bbae300 100644
--- a/src/stories/RadioButton.stories.tsx
+++ b/src/stories/RadioButton.stories.tsx
@@ -1,32 +1,40 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ChangeEventHandler, useState, useCallback } from 'react';
-import { Select } from '../';
+import { RadioButton, Stack } from '../';
 
 export default {
-  component: Select,
-} as Meta<typeof Select>;
-
-const options = ['option1', 'option2', 'option3'];
+  component: RadioButton,
+} as Meta<typeof RadioButton>;
 
 const defaultArgs = {
-  isInvalid: false,
   disabled: false,
+  name: 'sample',
 };
 
-export const Default: StoryObj<typeof Select> = {
+export const Default: StoryObj<typeof RadioButton> = {
   render: (args) => {
-    const [selectedItem, setSelectedItem] = useState(options[0]);
+    const [selectedItem, setSelectedItem] = useState('medium');
 
-    const onChange: ChangeEventHandler<HTMLSelectElement> = useCallback((event) => {
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
       setSelectedItem(event.target.value);
     }, []);
 
     return (
-      <Select {...args} value={selectedItem} onChange={onChange}>
-        {options.map((o) => (
-          <option key={o}>{o}</option>
-        ))}
-      </Select>
+      <Stack spacing="xs">
+        <RadioButton {...args} value="medium" id="medium" onChange={onChange} checked={selectedItem === 'medium'}>
+          Medium
+        </RadioButton>
+        <RadioButton
+          {...args}
+          value="small"
+          id="small"
+          onChange={onChange}
+          checked={selectedItem === 'small'}
+          size="small"
+        >
+          Small
+        </RadioButton>
+      </Stack>
     );
   },
   args: defaultArgs,

From 3b142ec7feaa36c104db621810b67e35c75d937a Mon Sep 17 00:00:00 2001
From: takanorip <takanori0170@gmail.com>
Date: Wed, 27 Sep 2023 04:10:05 +0900
Subject: [PATCH 4/6] add hover style

---
 src/components/Checkbox/Checkbox.module.css       | 4 ++++
 src/components/RadioButton/RadioButton.module.css | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/components/Checkbox/Checkbox.module.css b/src/components/Checkbox/Checkbox.module.css
index 2a7de821..14fcd5c1 100644
--- a/src/components/Checkbox/Checkbox.module.css
+++ b/src/components/Checkbox/Checkbox.module.css
@@ -44,6 +44,10 @@
   height: 1.25rem;
 }
 
+.container:hover .checkIconContainer {
+  border-color: var(--color-primary);
+}
+
 .checkIcon {
   visibility: hidden;
   color: #fff;
diff --git a/src/components/RadioButton/RadioButton.module.css b/src/components/RadioButton/RadioButton.module.css
index 1f5f0e56..d1a78dff 100644
--- a/src/components/RadioButton/RadioButton.module.css
+++ b/src/components/RadioButton/RadioButton.module.css
@@ -17,6 +17,10 @@
   height: 1.25rem;
 }
 
+.label:hover .icon {
+  border-color: var(--color-primary);
+}
+
 .icon::before {
   position: absolute;
   top: 50%;

From 93e2d87ae94ccad2fca781bcd8c08defa63a85b4 Mon Sep 17 00:00:00 2001
From: takanorip <takanori0170@gmail.com>
Date: Wed, 27 Sep 2023 05:22:20 +0900
Subject: [PATCH 5/6] fix type

---
 src/components/Checkbox/Checkbox.tsx       | 6 +++---
 src/components/RadioButton/RadioButton.tsx | 2 +-
 src/stories/Checkbox.stories.tsx           | 6 ++++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index a0da67f9..aa5d9f31 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -2,13 +2,13 @@
 
 import { CheckAIcon } from '@ubie/ubie-icons';
 import clsx from 'clsx';
-import { FC, PropsWithChildren, InputHTMLAttributes } from 'react';
+import { FC, InputHTMLAttributes } from 'react';
 import styles from './Checkbox.module.css';
 
 type Props = {
   size?: 'medium' | 'small';
-} & InputHTMLAttributes<HTMLInputElement> &
-  PropsWithChildren;
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'value' | 'children'>> &
+  Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 
 export const Checkbox: FC<Props> = ({ size = 'medium', children }) => {
   return (
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index 38748c9c..80ae9087 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -5,7 +5,7 @@ import styles from './RadioButton.module.css';
 type RadioProps = Required<
   Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'value' | 'checked' | 'children'>
 > &
-  InputHTMLAttributes<HTMLInputElement>;
+  Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 
 type Props = {
   size?: 'medium' | 'small';
diff --git a/src/stories/Checkbox.stories.tsx b/src/stories/Checkbox.stories.tsx
index fe69f4b2..f3ed0176 100644
--- a/src/stories/Checkbox.stories.tsx
+++ b/src/stories/Checkbox.stories.tsx
@@ -9,8 +9,10 @@ export const Default: StoryObj<typeof Checkbox> = {
   render: () => {
     return (
       <Stack spacing="xs">
-        <Checkbox>Medium</Checkbox>
-        <Checkbox size="small">Small</Checkbox>
+        <Checkbox value="medium">Medium</Checkbox>
+        <Checkbox value="small" size="small">
+          Small
+        </Checkbox>
       </Stack>
     );
   },

From 817a3aa8986c3b40de9de0242d916c8d1e08a966 Mon Sep 17 00:00:00 2001
From: takanorip <takanori0170@gmail.com>
Date: Sun, 1 Oct 2023 23:47:51 +0900
Subject: [PATCH 6/6] fix problems

---
 src/components/Checkbox/Checkbox.module.css   | 33 +++++++++++++++----
 src/components/Checkbox/Checkbox.tsx          |  4 +--
 .../RadioButton/RadioButton.module.css        |  6 ++--
 src/stories/Checkbox.stories.tsx              | 13 ++++++--
 4 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.module.css b/src/components/Checkbox/Checkbox.module.css
index 14fcd5c1..6c454f17 100644
--- a/src/components/Checkbox/Checkbox.module.css
+++ b/src/components/Checkbox/Checkbox.module.css
@@ -6,6 +6,10 @@
   cursor: pointer;
 }
 
+.container:has(input:disabled) {
+  cursor: initial;
+}
+
 .checkbox {
   position: absolute;
   clip: rect(1px, 1px, 1px, 1px);
@@ -17,7 +21,9 @@
 }
 
 .checkIconContainer {
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border: 2px solid var(--color-ubie-black-400);
   border-radius: var(--radius-sm);
   transition: background-color 200ms;
@@ -44,8 +50,14 @@
   height: 1.25rem;
 }
 
-.container:hover .checkIconContainer {
-  border-color: var(--color-primary);
+@media (pointer: fine) {
+  .container:hover .checkIconContainer {
+    border-color: var(--color-primary);
+  }
+
+  .container:hover input:disabled + .checkIconContainer {
+    border-color: var(--color-text-disabled);
+  }
 }
 
 .checkIcon {
@@ -61,15 +73,24 @@
   font-size: 1rem;
 }
 
-.container input:checked + .checkIconContainer {
+input:checked + .checkIconContainer {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
 }
 
-.container input:checked + .checkIconContainer .checkIcon {
+input:checked + .checkIconContainer .checkIcon {
   visibility: initial;
 }
 
-.container input:focus-visible + .checkIconContainer {
+input:focus-visible + .checkIconContainer {
   outline: solid var(--color-accent) 2px;
 }
+
+input:disabled + .checkIconContainer {
+  border-color: var(--color-text-disabled);
+}
+
+input:disabled:checked + .checkIconContainer {
+  border: none;
+  background-color: var(--color-text-disabled);
+}
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index aa5d9f31..8d3237be 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -10,10 +10,10 @@ type Props = {
 } & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'value' | 'children'>> &
   Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 
-export const Checkbox: FC<Props> = ({ size = 'medium', children }) => {
+export const Checkbox: FC<Props> = ({ size = 'medium', children, ...otherProps }) => {
   return (
     <label className={clsx(styles.container, styles[size])}>
-      <input type="checkbox" className={styles.checkbox} />
+      <input type="checkbox" className={styles.checkbox} {...otherProps} />
       <span className={styles.checkIconContainer}>
         <CheckAIcon className={styles.checkIcon} />
       </span>
diff --git a/src/components/RadioButton/RadioButton.module.css b/src/components/RadioButton/RadioButton.module.css
index d1a78dff..f69294eb 100644
--- a/src/components/RadioButton/RadioButton.module.css
+++ b/src/components/RadioButton/RadioButton.module.css
@@ -17,8 +17,10 @@
   height: 1.25rem;
 }
 
-.label:hover .icon {
-  border-color: var(--color-primary);
+@media (pointer: fine) {
+  .label:hover .icon {
+    border-color: var(--color-primary);
+  }
 }
 
 .icon::before {
diff --git a/src/stories/Checkbox.stories.tsx b/src/stories/Checkbox.stories.tsx
index f3ed0176..45e451a9 100644
--- a/src/stories/Checkbox.stories.tsx
+++ b/src/stories/Checkbox.stories.tsx
@@ -5,15 +5,22 @@ export default {
   component: Checkbox,
 } as Meta<typeof Checkbox>;
 
+const defaultArgs = {
+  disabled: false,
+};
+
 export const Default: StoryObj<typeof Checkbox> = {
-  render: () => {
+  render: (args) => {
     return (
       <Stack spacing="xs">
-        <Checkbox value="medium">Medium</Checkbox>
-        <Checkbox value="small" size="small">
+        <Checkbox {...args} value="medium">
+          Medium
+        </Checkbox>
+        <Checkbox {...args} value="small" size="small">
           Small
         </Checkbox>
       </Stack>
     );
   },
+  args: defaultArgs,
 };