@codecademy/gamut

73.6.173.6.2-alpha.3e37cd.0
dist/Form/inputs/Radio.d.ts
~dist/Form/inputs/Radio.d.tsModified
+17−1
Index: package/dist/Form/inputs/Radio.d.ts
===================================================================
--- package/dist/Form/inputs/Radio.d.ts
+++ package/dist/Form/inputs/Radio.d.ts
@@ -1,10 +1,12 @@
 import { StyleProps } from '@codecademy/variance';
-import { InputHTMLAttributes, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, InputHTMLAttributes, ReactNode } from 'react';
 import * as React from 'react';
 import { InfoTipSubComponentProps } from '../../Tip/InfoTip/type-utils';
+import { DataAttributes } from '../../utils';
 import { conditionalRadioInputStyles } from '../styles';
 import { BaseInputProps } from '../types';
+export type RadioLabelProps = Omit<ComponentPropsWithoutRef<'label'>, keyof React.DOMAttributes<HTMLElement>> & DataAttributes;
 export type RadioProps = InputHTMLAttributes<HTMLInputElement> & Omit<BaseInputProps, 'label'> & {
     checked?: boolean;
     disabled?: boolean;
     id?: string;
@@ -14,8 +16,15 @@
      * To override this behavior, provide `ariaLabel` or `ariaLabelledby`.
      */
     infotip?: InfoTipSubComponentProps;
     /**
+     * Props to forward to the visible label element that wraps the radio
+     * UI - the thing users actually click. Unlike `...rest`, which lands on
+     * the screenreader-only `<input>`, this is the slot for `data-*`/`aria-*`
+     * attributes meant for click tracking or targeting the visible element.
+     */
+    labelProps?: RadioLabelProps;
+    /**
      * A label for your Radio input - should not include infotips or other interactive elements
      */
     label?: ReactNode;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -38,8 +47,15 @@
      * To override this behavior, provide `ariaLabel` or `ariaLabelledby`.
      */
     infotip?: InfoTipSubComponentProps;
     /**
+     * Props to forward to the visible label element that wraps the radio
+     * UI - the thing users actually click. Unlike `...rest`, which lands on
+     * the screenreader-only `<input>`, this is the slot for `data-*`/`aria-*`
+     * attributes meant for click tracking or targeting the visible element.
+     */
+    labelProps?: RadioLabelProps;
+    /**
      * A label for your Radio input - should not include infotips or other interactive elements
      */
     label?: ReactNode;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;