@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;