[ui][checkbox list] implementation

packages/ui/src/CheckboxInput/CheckboxInput.tsx

@@ -0,0 +1,83 @@
+import clsx from 'clsx';
+import type { ChangeEvent } from 'react';
+import { useId } from 'react';
+
+type Props = Readonly<{
+  defaultValue?: boolean;
+  description?: string;
+  disabled?: boolean;
+  label: string;
+  name?: string;
+  onChange?: (
+    value: boolean,
+    event: ChangeEvent<HTMLInputElement>,
+  ) => undefined | void;
+  value?: boolean;
+}>;
+
+export default function CheckboxInput({
+  defaultValue,
+  description,
+  disabled = false,
+  label,
+  name,
+  value,
+  onChange,
+}: Props) {
+  const id = useId();
+  const descriptionId = useId();
+
+  return (
+    <div
+      className={clsx(
+        'relative flex',
+        // Vertically center only when there's no description.
+        description == null && 'items-center',
+      )}>
+      <div className="flex h-5 items-center">
+        <input
+          aria-describedby={description != null ? descriptionId : undefined}
+          checked={value}
+          className={clsx(
+            'h-4 w-4 rounded border-slate-300',
+            disabled
+              ? 'bg-slate-100 text-slate-400'
+              : 'text-primary-600 focus:ring-primary-500',
+          )}
+          defaultChecked={defaultValue}
+          disabled={disabled}
+          id={id}
+          name={name}
+          type="checkbox"
+          onChange={
+            onChange != null
+              ? (event) => {
+                  onChange?.(event.target.checked, event);
+                }
+              : undefined
+          }
+        />
+      </div>
+      <div className="ml-3 text-sm">
+        <label
+          className={clsx(
+            'block font-medium',
+            disabled ? 'text-slate-400' : 'text-slate-700',
+          )}
+          htmlFor={id}>
+          {label}
+        </label>
+        {description && (
+          <p
+            className={clsx(
+              'text-xs',
+              disabled ? 'text-slate-400' : 'text-slate-500',
+            )}
+            id={descriptionId}>
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

packages/ui/src/CheckboxList/CheckboxList.tsx

@@ -0,0 +1,46 @@
+import clsx from 'clsx';
+import { useId } from 'react';
+
+import type CheckboxInput from '../CheckboxInput/CheckboxInput';
+
+export type CheckboxListOrientation = 'horizontal' | 'vertical';
+
+type Props = Readonly<{
+  children: ReadonlyArray<React.ReactElement<typeof CheckboxInput>>;
+  description?: string;
+  isLabelHidden?: boolean;
+  label: string;
+  orientation?: CheckboxListOrientation;
+}>;
+
+export default function CheckboxList({
+  children,
+  description,
+  isLabelHidden,
+  label,
+  orientation = 'vertical',
+}: Props) {
+  const labelId = useId();
+  return (
+    <div>
+      <div className={clsx(isLabelHidden ? 'sr-only' : 'mb-2')}>
+        <label className="text-sm font-medium text-gray-900" id={labelId}>
+          {label}
+        </label>
+        {description && (
+          <p className="text-xs leading-5 text-gray-500">{description}</p>
+        )}
+      </div>
+      <div
+        aria-labelledby={labelId}
+        className={clsx(
+          'space-y-2',
+          orientation === 'horizontal' &&
+            'sm:flex sm:items-center sm:space-y-0 sm:space-x-10',
+        )}
+        role="group">
+        {children}
+      </div>
+    </div>
+  );
+}

packages/ui/src/index.tsx

@@ -7,6 +7,12 @@ export { default as Badge } from './Badge/Badge';
 // Button
 export * from './Button/Button';
 export { default as Button } from './Button/Button';
+// CheckboxInput
+export * from './CheckboxInput/CheckboxInput';
+export { default as CheckboxInput } from './CheckboxInput/CheckboxInput';
+// CheckboxList
+export * from './CheckboxList/CheckboxList';
+export { default as CheckboxList } from './CheckboxList/CheckboxList';
 // Collapsible
 export * from './Collapsible/Collapsible';
 export { default as Collapsible } from './Collapsible/Collapsible';