fix: readonly style

pixiv · Feb 21, 2024 · 6503c3d · 6503c3d
1 parent dabe2f7
commit 6503c3d
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/packages/react/src/components/Checkbox/index.tsx b/packages/react/src/components/Checkbox/index.tsx
@@ -58,7 +58,11 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     return (
       <InputRoot aria-disabled={isDisabled} className={props.className}>
         <CheckboxRoot>
-          <CheckboxInput type="checkbox" {...inputProps} />
+          <CheckboxInput
+            type="checkbox"
+            {...inputProps}
+            readOnly={props.readonly}
+          />
           <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>
             <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
           </CheckboxInputOverlay>
@@ -108,6 +112,9 @@ const CheckboxInput = styled.input`
     &:disabled {
       cursor: default;
     }
+    &:read-only {
+      cursor: default;
+    }
 
     &:checked {
       background-color: var(--charcoal-brand);