diff --git a/src/mantine-core/src/Radio/Radio.story.tsx b/src/mantine-core/src/Radio/Radio.story.tsx index 0de6e54302e..7bf637ecbf8 100644 --- a/src/mantine-core/src/Radio/Radio.story.tsx +++ b/src/mantine-core/src/Radio/Radio.story.tsx @@ -30,13 +30,43 @@ export function RadioGroup() { export function Sizes() { const items = MANTINE_SIZES.map((size) => ( - + )); - return
{items}
; + + return ( +
+ +
+ Independent Radio buttons: + + + + + +
+
+ Radio Group: + {items} +
+
+ Override size of specific radio button in group: + + + + + + + + + +
+
+
+ ); } export function ComparedToCheckbox() { diff --git a/src/mantine-core/src/Radio/Radio.tsx b/src/mantine-core/src/Radio/Radio.tsx index 93f463a3113..4e6780604b8 100644 --- a/src/mantine-core/src/Radio/Radio.tsx +++ b/src/mantine-core/src/Radio/Radio.tsx @@ -84,8 +84,11 @@ export const Radio: RadioComponent = forwardRef((p } = useComponentDefaultProps('Radio', defaultProps, props); const ctx = useRadioGroupContext(); + const contextSize = ctx?.size ?? size; + const componentSize = props.size ? size : contextSize; + const { classes } = useStyles( - { color, size: ctx?.size || size, transitionDuration, labelPosition, error: !!error }, + { color, size: componentSize, transitionDuration, labelPosition, error: !!error }, { classNames, styles, unstyled, name: 'Radio' } ); @@ -106,7 +109,7 @@ export const Radio: RadioComponent = forwardRef((p sx={sx} style={style} id={uuid} - size={ctx?.size || size} + size={componentSize} labelPosition={labelPosition} label={label} description={description}