diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c19d4d681d2c12..c06943e6dbd72d 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -10,6 +10,10 @@ - `ValidatedComboboxControl`: Expose the component under private API's. [#74891](https://github.com/WordPress/gutenberg/pull/74891) +### Enhancements + +- `ToggleControl` pass full props and support required validation in `ValidatedToggleControl`. [#74956](https://github.com/WordPress/gutenberg/pull/74956) + ## 32.0.0 (2026-01-16) ### Code Quality diff --git a/packages/components/src/toggle-control/index.tsx b/packages/components/src/toggle-control/index.tsx index a2373af62a62d8..39a52c7788da23 100644 --- a/packages/components/src/toggle-control/index.tsx +++ b/packages/components/src/toggle-control/index.tsx @@ -28,6 +28,7 @@ function UnforwardedToggleControl( className, onChange, disabled, + ...additionalProps }: WordPressComponentProps< ToggleControlProps, 'input', false >, ref: ForwardedRef< HTMLInputElement > ) { @@ -74,6 +75,7 @@ function UnforwardedToggleControl( aria-describedby={ describedBy } disabled={ disabled } ref={ ref } + { ...additionalProps } /> ( null ); const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] ); - // TODO: Upstream limitation - The `required` attribute is not passed down to the input, - // so we need to set it manually. - useEffect( () => { - if ( validityTargetRef.current ) { - validityTargetRef.current.required = required ?? false; - } - }, [ required ] ); - return ( validityTargetRef.current } > - + ); };