add form elements

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,22 +18,52 @@
 
 .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;
+}
+
+.container:hover .checkIconContainer {
+  border-color: var(--color-primary);
 }
 
 .checkIcon {
   visibility: hidden;
   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 {

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, InputHTMLAttributes } from 'react';
 import styles from './Checkbox.module.css';
 
 type Props = {
-  children: ReactNode;
-};
+  size?: 'medium' | 'small';
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'value' | 'children'>> &
+  Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 
-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} />

src/components/RadioButton/RadioButton.module.css

@@ -0,0 +1,88 @@
+.icon {
+  position: relative;
+  background-color: var(--color-background-white);
+  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;
+}
+
+.label:hover .icon {
+  border-color: var(--color-primary);
+}
+
+.icon::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  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;
+}
+
+.radio:checked + label .icon {
+  border-color: var(--color-primary);
+}
+
+.radio:checked + label .icon::before {
+  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);
+}
+
+.label {
+  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);
+}

src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import { FC, InputHTMLAttributes } from 'react';
+import styles from './RadioButton.module.css';
+
+type RadioProps = Required<
+  Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'value' | 'checked' | 'children'>
+> &
+  Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = {
+  size?: 'medium' | 'small';
+} & RadioProps;
+
+export const RadioButton: FC<Props> = ({
+  size = 'medium',
+  checked,
+  onChange,
+  value,
+  id,
+  name,
+  children,
+  ...otherProps
+}) => {
+  return (
+    <div className={clsx(styles.container, styles[size])}>
+      <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>
+  );
+};

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);
+}

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.css';
+
+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 };

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);
+}

src/components/TextArea/TextArea.tsx

@@ -0,0 +1,13 @@
+import clsx from 'clsx';
+import { FC, TextareaHTMLAttributes } from 'react';
+import styles from './TextArea.module.css';
+
+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} />;
+};

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';