diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx index 1686b72f29..fe2adc336a 100644 --- a/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx +++ b/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx @@ -15,9 +15,10 @@ const _UNSTABLE_Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputE id, isDisabled, isChecked, + isRequired, label, helperText, - onChange, + onChange = () => {}, validationState, validationText, ...restProps @@ -55,8 +56,8 @@ const _UNSTABLE_Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputE className={classProps.input} disabled={isDisabled} checked={isChecked} + required={isRequired} onChange={onChange} - name="default" ref={ref} /> </label> diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/useToggleStyleProps.ts b/packages/web-react/src/components/UNSTABLE_Toggle/useToggleStyleProps.ts index 8eb76596a1..0dda7b49e6 100644 --- a/packages/web-react/src/components/UNSTABLE_Toggle/useToggleStyleProps.ts +++ b/packages/web-react/src/components/UNSTABLE_Toggle/useToggleStyleProps.ts @@ -15,14 +15,21 @@ export interface ToggleStyles<T> { } export function useToggleStyleProps(props: SpiritToggleProps): ToggleStyles<SpiritToggleProps> { - const { isRequired = false, isFluid = false, isDisabled, isLabelHidden = false, validationState } = props; + const { + isRequired = false, + isFluid = false, + isDisabled, + isLabelHidden = false, + validationState, + ...restProps + } = props; const toggleClass = useClassNamePrefix('UNSTABLE_Toggle'); - const toggleHiddenLabelClass = `${toggleClass}--hiddenLabel`; const toggleFluidClass = `${toggleClass}--fluid`; const toggleDisabledClass = `${toggleClass}--disabled`; const toggleTextClass = `${toggleClass}__text`; const toggleLabelClass = `${toggleClass}__label`; + const toggleHiddenLabelClass = `${toggleLabelClass}--hidden`; const toggleValidationClass = `${toggleClass}--${validationState}`; const toggleRequiredClass = `${toggleLabelClass}--required`; const toggleInputClass = `${toggleClass}__input`; @@ -47,6 +54,6 @@ export function useToggleStyleProps(props: SpiritToggleProps): ToggleStyles<Spir input: toggleInputClass, validationText: toggleValidationTextClass, }, - props, + props: restProps, }; } diff --git a/packages/web-react/src/types/toggle.ts b/packages/web-react/src/types/toggle.ts index 75e96ae2fc..9af280e436 100644 --- a/packages/web-react/src/types/toggle.ts +++ b/packages/web-react/src/types/toggle.ts @@ -1,3 +1,4 @@ +import { ChangeEvent } from 'react'; import { LabelProps } from './label'; import { ChildrenProps, @@ -27,6 +28,7 @@ export interface ToggleProps isLabelHidden?: boolean; label: string; validationText?: ValidationTextType; + onChange?: (event: ChangeEvent<HTMLInputElement>) => void; } export interface SpiritToggleProps extends ToggleProps {}