diff --git a/app/page.tsx b/app/page.tsx
index 416b4ae..d17a745 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import testImage1 from './test-images/test-image-1.jpg';
import { Card } from '../src/primitive-components/card/card';
-import { Checkbox } from '../src/primitive-components/components';
+import {Checkbox, Radio} from '../src/primitive-components/components';
import { CardBody } from '../src/primitive-components/card/card-body';
import { CardMedia } from '../src/primitive-components/card/card-media';
import { CardFooter } from '../src/primitive-components/card/card-footer';
@@ -25,7 +25,7 @@ export default function Page() {
padding: '8px',
}}
>
-
+
Header-3
@@ -54,7 +54,7 @@ export default function Page() {
-
+
+
+
diff --git a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx
index 9cc1eb9..8256ccb 100644
--- a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx
+++ b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx
@@ -16,7 +16,7 @@ export const SegmentedButtons = forwardRef<
(Button: ReactElement, index: number) => {
return cloneElement(
, {
...Button.props,
- toggled: toggled,
+ toggled: Button.props.toggled ?? toggled,
key: index,
});
},
diff --git a/src/primitive-components/input-components/checkbox/checkbox.tsx b/src/primitive-components/input-components/checkbox/checkbox.tsx
index 2680c53..27f59ad 100644
--- a/src/primitive-components/input-components/checkbox/checkbox.tsx
+++ b/src/primitive-components/input-components/checkbox/checkbox.tsx
@@ -19,7 +19,7 @@ import {
*/
export const Checkbox = forwardRef
(
- ({ centralRipple, ...props }, ref) => {
+ ({ centralRipple = true, ...props }, ref) => {
const [isActive, setIsActive] = useState(false),
[checked, setChecked] = useState(props.checked ?? false),
ripplesRef = useRef(null),
@@ -27,7 +27,7 @@ export const Checkbox = forwardRef(
events = useRippleEffect(ripplesRef, setIsActive);
const extraClassStyles =
- `m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
+ `m3 m3-checkbox-container ${isActive === true ? 'visible' : ''}`.trimEnd();
useImperativeHandle(ref, () => checkboxRef.current);
@@ -36,7 +36,7 @@ export const Checkbox = forwardRef(
}, [checkboxRef.current?.checked]);
return (
-