diff --git a/package.json b/package.json index 7b2e63773..890639942 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@homebound/beam", - "version": "2.340.0", + "version": "2.341.0", "author": "Homebound", "license": "MIT", "main": "dist/index.js", diff --git a/src/inputs/Checkbox.tsx b/src/inputs/Checkbox.tsx index e65515d6f..8c2bb5955 100644 --- a/src/inputs/Checkbox.tsx +++ b/src/inputs/Checkbox.tsx @@ -5,6 +5,11 @@ import { CheckboxBase } from "src/inputs/CheckboxBase"; export interface CheckboxProps { label: string; + /** If false this will be wrap in a div element instead of the label + * Expects implementer to wrap within a label element to work properly + * @default true + */ + withLabelElement?: boolean; checkboxOnly?: boolean; selected: boolean | "indeterminate"; /** Handler that is called when the element's selection state changes. */ diff --git a/src/inputs/CheckboxBase.tsx b/src/inputs/CheckboxBase.tsx index 1e5d729ab..73cd6ba0e 100644 --- a/src/inputs/CheckboxBase.tsx +++ b/src/inputs/CheckboxBase.tsx @@ -26,6 +26,11 @@ export interface CheckboxBaseProps extends BeamFocusableProps { checkboxOnly?: boolean; errorMsg?: string; helperText?: string | ReactNode; + /** If false this will be wrap in a div element instead of the label + * Expects implementer to wrap within a label element to work properly + * @default true + */ + withLabelElement?: boolean; } export function CheckboxBase(props: CheckboxBaseProps) { @@ -34,20 +39,21 @@ export function CheckboxBase(props: CheckboxBaseProps) { description, isDisabled = false, isIndeterminate = false, - isSelected, inputProps, label, errorMsg, helperText, checkboxOnly = false, + withLabelElement = true, } = props; const ref = useRef(null); const { isFocusVisible, focusProps } = useFocusRing(ariaProps); - const { hoverProps, isHovered } = useHover({ isDisabled }); const tid = useTestIds(props, defaultTestId(label)); + const Tag = withLabelElement ? "label" : "div"; + return ( - + ); }