diff --git a/packages/components/checkbox/src/use-checkbox.ts b/packages/components/checkbox/src/use-checkbox.ts index 376541cb1d..fa72253276 100644 --- a/packages/components/checkbox/src/use-checkbox.ts +++ b/packages/components/checkbox/src/use-checkbox.ts @@ -195,6 +195,7 @@ export function useCheckbox(props: UseCheckboxProps = {}) { const { inputProps, + labelProps, isSelected, isDisabled, isReadOnly, @@ -277,7 +278,7 @@ export function useCheckbox(props: UseCheckboxProps = {}) { "data-readonly": dataAttr(inputProps.readOnly), "data-focus-visible": dataAttr(isFocusVisible), "data-indeterminate": dataAttr(isIndeterminate), - ...mergeProps(hoverProps, otherProps), + ...mergeProps(hoverProps, labelProps, otherProps), }; }, [ slots, diff --git a/packages/components/radio/src/use-radio.ts b/packages/components/radio/src/use-radio.ts index b171b1e006..4430ec5695 100644 --- a/packages/components/radio/src/use-radio.ts +++ b/packages/components/radio/src/use-radio.ts @@ -115,7 +115,7 @@ export function useRadio(props: UseRadioProps) { descriptionId, ]); - const {inputProps, isDisabled, isSelected, isPressed} = useReactAriaRadio( + const {inputProps, labelProps, isDisabled, isSelected, isPressed} = useReactAriaRadio( { value, children: typeof children === "function" ? true : children, @@ -166,7 +166,7 @@ export function useRadio(props: UseRadioProps) { "data-hover-unselected": dataAttr(isHovered && !isSelected), "data-readonly": dataAttr(inputProps.readOnly), "aria-required": dataAttr(isRequired), - ...mergeProps(hoverProps, otherProps), + ...mergeProps(hoverProps, labelProps, otherProps), }; }, [ diff --git a/packages/components/switch/src/use-switch.ts b/packages/components/switch/src/use-switch.ts index 34adb52e54..0e3a89fbf8 100644 --- a/packages/components/switch/src/use-switch.ts +++ b/packages/components/switch/src/use-switch.ts @@ -155,7 +155,11 @@ export function useSwitch(originalProps: UseSwitchProps = {}) { state.setSelected(isInputRefChecked); }, [inputRef.current]); - const {inputProps, isPressed, isReadOnly} = useReactAriaSwitch(ariaSwitchProps, state, inputRef); + const {inputProps, labelProps, isPressed, isReadOnly} = useReactAriaSwitch( + ariaSwitchProps, + state, + inputRef, + ); const {focusProps, isFocused, isFocusVisible} = useFocusRing({autoFocus: inputProps.autoFocus}); const {hoverProps, isHovered} = useHover({ isDisabled: inputProps.disabled, @@ -180,7 +184,7 @@ export function useSwitch(originalProps: UseSwitchProps = {}) { const getBaseProps: PropGetter = (props) => { return { - ...mergeProps(hoverProps, otherProps, props), + ...mergeProps(hoverProps, labelProps, otherProps, props), ref: domRef, className: slots.base({class: clsx(baseStyles, props?.className)}), "data-disabled": dataAttr(isDisabled),