@utilitywarehouse/hearth-react-native 0.15.3 → 0.16.0

package/src/components/FormField/FormField.tsx

@@ -1,5 +1,5 @@
 import { createFormControl } from '@gluestack-ui/form-control';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { View } from 'react-native';
 import { HelperIcon, HelperText } from '../Helper';
 import { FormFieldContext } from './FormField.context';
@@ -46,16 +46,40 @@ const FormField = ({
   validText,
   invalidText,
   required = true,
+  labelVariant = 'body',
+  accessibilityHandledByChildren = false,
   ...props
 }: FormFieldProps) => {
+  const [shouldHandleAccessibility, setShouldHandleAccessibility] = useState<boolean>(
+    accessibilityHandledByChildren
+  );
   const value = useMemo(
     () => ({
       validationStatus,
       disabled,
       readonly,
       required,
+      label,
+      helperText,
+      helperIcon,
+      validText,
+      invalidText,
+      setShouldHandleAccessibility,
+      shouldHandleAccessibility,
     }),
-    [validationStatus, disabled, readonly, required]
+    [
+      validationStatus,
+      disabled,
+      readonly,
+      required,
+      label,
+      helperText,
+      helperIcon,
+      validText,
+      invalidText,
+      setShouldHandleAccessibility,
+      shouldHandleAccessibility,
+    ]
   );
 
   return (
@@ -64,13 +88,23 @@ const FormField = ({
         {(!!label || !!helperText) && (
           <FormFieldTextContent>
             {!!label && (
-              <FormFieldLabelText>
+              <FormFieldLabelText
+                variant={labelVariant}
+                importantForAccessibility={shouldHandleAccessibility ? 'no' : undefined}
+                accessibilityElementsHidden={shouldHandleAccessibility}
+              >
                 {label}
                 {!required ? ` (Optional)` : ''}
               </FormFieldLabelText>
             )}
             {!!helperText && (
-              <FormFieldHelper text={helperText} icon={helperIcon} showIcon={!!helperIcon} />
+              <FormFieldHelper
+                text={helperText}
+                icon={helperIcon}
+                showIcon={!!helperIcon}
+                importantForAccessibility={shouldHandleAccessibility ? 'no' : undefined}
+                accessibilityElementsHidden={shouldHandleAccessibility}
+              />
             )}
           </FormFieldTextContent>
         )}

package/src/components/FormField/FormFieldLabel.tsx

@@ -1,10 +1,14 @@
-import { useFormFieldContext } from './FormField.context';
 import { Label } from '../Label';
 import LabelProps from '../Label/Label.props';
+import { useFormFieldContext } from './FormField.context';
 
-const FormFieldLabel = ({ children }: Omit<LabelProps, 'disabled'>) => {
+const FormFieldLabel = ({ children, ...props }: Omit<LabelProps, 'disabled'>) => {
   const { disabled } = useFormFieldContext();
-  return <Label disabled={disabled}>{children}</Label>;
+  return (
+    <Label disabled={disabled} {...props}>
+      {children}
+    </Label>
+  );
 };
 
 FormFieldLabel.displayName = 'FormFieldLabel';

package/src/components/FormField/FormFieldValid.tsx

@@ -1,7 +1,7 @@
-import { useFormFieldContext } from './FormField.context';
+import { TickCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Helper } from '../Helper';
 import HelperProps from '../Helper/Helper.props';
-import { TickCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useFormFieldContext } from './FormField.context';
 
 const FormFieldValid = ({
   children,

package/src/components/Input/Input.docs.mdx

@@ -83,18 +83,25 @@ all of the React Native [`View` props](https://reactnative.dev/docs/view).
 | ---------------- | ---------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | type             | `'text' \| 'password'`             | `'text'`    | The type of the input.                                                                                                                                                  |
 | validationStatus | `'initial' \| 'valid' \| 'invalid` | `'initial'` | The validation status of the input.                                                                                                                                     |
-| disabled         | boolean                            | `false`     | Disables the input.                                                                                                                                                     |
-| readonly         | boolean                            | `false`     | Makes the input read-only.                                                                                                                                              |
-| focused          | boolean                            | `false`     | Sets focus on the input.                                                                                                                                                |
-| leadingIcon      | React.ComponentType                | `-`         | The leading icon of the input. **(Only to be used if the input has no children)**                                                                                       |
-| trailingIcon     | React.ComponentType                | `-`         | The trailing icon of the input. **(Only to be used if the input has no children)**                                                                                      |
-| value            | string                             | `-`         | The value of the input. **(Only to be used if the input has no children)**                                                                                              |
-| onChange         | function                           | `-`         | Callback function that is triggered when the input value changes. **(Only to be used if the input has no children)** **(Only to be used if the input has no children)** |
-| onBlur           | function                           | `-`         | Callback function that is triggered when the input loses focus. **(Only to be used if the input has no children)**                                                      |
-| onFocus          | function                           | `-`         | Callback function that is triggered when the input gains focus. **(Only to be used if the input has no children)**                                                      |
-| placeholder      | string                             | `-`         | The placeholder text for the input. **(Only to be used if the input has no children)**                                                                                  |
-| required         | boolean                            | `true`      | Indicates that the input is required. **(Only to be used if the input has no children)**                                                                                |
-| inBottomSheet    | boolean                            | `false`     | Indicates if the input is within a bottom sheet.                                                                                                                        |
+| disabled         | `boolean`                          | `false`     | Disables the input.                                                                                                                                                     |
+| readonly         | `boolean`                          | `false`     | Makes the input read-only.                                                                                                                                              |
+| focused          | `boolean`                          | `false`     | Sets focus on the input.                                                                                                                                                |
+| label            | `string`                           | `-`         | The label for the input. **(Only to be used if the input has no children)**                                                                                             |
+| labelVariant     | `'heading' \| 'body'`              | `'body'`    | The variant of the label text. **(Only to be used if the input has no children)**                                                                                       |
+| helperText       | `string`                           | `-`         | Helper text to display below the input. **(Only to be used if the input has no children)**                                                                              |
+| helperIcon       | `React.ComponentType`              | `-`         | Icon to display alongside the helper text. **(Only to be used if the input has no children)**                                                                           |
+| validText        | `string`                           | `-`         | Text to display when validation status is 'valid'. **(Only to be used if the input has no children)**                                                                   |
+| invalidText      | `string`                           | `-`         | Text to display when validation status is 'invalid'. **(Only to be used if the input has no children)**                                                                 |
+| required         | `boolean`                          | `true`      | Indicates that the input is required. **(Only to be used if the input has no children)**                                                                                |
+| leadingIcon      | `React.ComponentType`              | `-`         | The leading icon of the input. **(Only to be used if the input has no children)**                                                                                       |
+| trailingIcon     | `React.ComponentType`              | `-`         | The trailing icon of the input. **(Only to be used if the input has no children)**                                                                                      |
+| value            | `string`                           | `-`         | The value of the input. **(Only to be used if the input has no children)**                                                                                              |
+| onChange         | `function`                         | `-`         | Callback function that is triggered when the input value changes. **(Only to be used if the input has no children)** **(Only to be used if the input has no children)** |
+| onBlur           | `function`                         | `-`         | Callback function that is triggered when the input loses focus. **(Only to be used if the input has no children)**                                                      |
+| onFocus          | `function`                         | `-`         | Callback function that is triggered when the input gains focus. **(Only to be used if the input has no children)**                                                      |
+| placeholder      | `string`                           | `-`         | The placeholder text for the input. **(Only to be used if the input has no children)**                                                                                  |
+| required         | `boolean`                          | `true`      | Indicates that the input is required. **(Only to be used if the input has no children)**                                                                                |
+| inBottomSheet    | `boolean`                          | `false`     | Indicates if the input is within a bottom sheet.                                                                                                                        |
 
 If the `leadingIcon` or `trailingIcon` props are used, the `Input` component should not have any children.
 
@@ -105,19 +112,19 @@ The `InputField` inherits all of the React Native [`TextInput` props](https://re
 | Prop          | Type                   | Default  | Description                                                       |
 | ------------- | ---------------------- | -------- | ----------------------------------------------------------------- |
 | type          | `'text' \| 'password'` | `'text'` | The type of the input.                                            |
-| value         | string                 | `-`      | The value of the input.                                           |
-| onChange      | function               | `-`      | Callback function that is triggered when the input value changes. |
-| onBlur        | function               | `-`      | Callback function that is triggered when the input loses focus.   |
-| onFocus       | function               | `-`      | Callback function that is triggered when the input gains focus.   |
-| placeholder   | string                 | `-`      | The placeholder text for the input.                               |
-| required      | boolean                | `true`   | Indicates that the input is required.                             |
-| inBottomSheet | boolean                | `false`  | Indicates if the input is within a bottom sheet.                  |
+| value         | `string`               | `-`      | The value of the input.                                           |
+| onChange      | `function`             | `-`      | Callback function that is triggered when the input value changes. |
+| onBlur        | `function`             | `-`      | Callback function that is triggered when the input loses focus.   |
+| onFocus       | `function`             | `-`      | Callback function that is triggered when the input gains focus.   |
+| placeholder   | `string`               | `-`      | The placeholder text for the input.                               |
+| required      | `boolean`              | `true`   | Indicates that the input is required.                             |
+| inBottomSheet | `boolean`              | `false`  | Indicates if the input is within a bottom sheet.                  |
 
 ### `InputIcon`
 
-| Prop | Type   | Default | Description         |
-| ---- | ------ | ------- | ------------------- |
-| as   | string |         | The icon component. |
+| Prop | Type     | Default | Description         |
+| ---- | -------- | ------- | ------------------- |
+| as   | `string` |         | The icon component. |
 
 ### `InputSlot`
 
@@ -191,6 +198,41 @@ The `Input` component has the following variants:
 
 ## Examples
 
+## With Label and Helper Text
+
+The `Input` component can be used with a label and helper text by passing the `label` and `helperText` props.
+
+<UsageWrap>
+  <Center>
+    <Input
+      label="Label"
+      helperText="Helper text"
+      onChange={() => console.log('###')}
+      placeholder="Placeholder"
+    />
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Input } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = useState('');
+  const handleChange = e => {
+    setValue(e.target.value);
+  };
+  return (
+    <Input
+      label="Label"
+      helperText="Helper text"
+      onChange={handleChange}
+      value={value}
+      placeholder="Placeholder"
+    />
+  );
+};
+```
+
 ### With `FormField`
 
 The `Input` component can be used with the `FormField` component to create a custom input field.
@@ -230,6 +272,9 @@ We have outlined the various features that ensure the Input component is accessi
 
 ### Screen Reader
 
+- When setting the label prop, it is associated with the Input using aria-label.
+- When setting the helperText prop, it is associated with the Input using aria-describedby.
+- The required prop to indicate if the Input is required or optional and is read out by screen readers.
 - Compatible with screen readers such as VoiceOver and Talk-back.
 - The accessible and aria-label props to provide descriptive information about the Input
 - Setting aria-traits and aria-hint to provide contextual information about the various states of the Input, such as "double tap to edit".

package/src/components/Input/Input.props.ts

@@ -27,6 +27,13 @@ export interface InputBaseProps {
   focused?: boolean;
   placeholder?: string;
   inBottomSheet?: boolean;
+  label?: string;
+  labelVariant?: 'heading' | 'body';
+  helperText?: string;
+  helperIcon?: ComponentType;
+  validText?: string;
+  invalidText?: string;
+  required?: boolean;
 }
 
 // For inputs that have children
@@ -40,7 +47,6 @@ export interface InputWithChildrenProps extends InputBaseProps, ViewProps {
   onClear?: never;
   leadingIcon?: never;
   trailingIcon?: never;
-  required?: never;
 }
 
 // Base for inputs without children

package/src/components/Input/Input.stories.tsx

@@ -82,7 +82,15 @@ export const Playground: Story = {
     const leadingIcon = leading === 'none' ? undefined : Icons[leading];
     // @ts-expect-error - This is a playground
     const trailingIcon = trailing === 'none' ? undefined : Icons[trailing];
-    return <Input {...args} leadingIcon={leadingIcon} trailingIcon={trailingIcon} />;
+    return (
+      <Input
+        {...args}
+        leadingIcon={leadingIcon}
+        trailingIcon={trailingIcon}
+        label="First Name"
+        helperText="Only enter your first name, not your full name"
+      />
+    );
   },
 };
 

package/src/components/Input/Input.tsx

@@ -1,5 +1,5 @@
 import { createInput } from '@gluestack-ui/input';
-import { ComponentType, forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { ComponentType, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { TextInput } from 'react-native';
 import type InputProps from './Input.props';
 
@@ -10,7 +10,7 @@ import {
   SearchMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 import { useTheme } from '../../hooks';
-import { useFormFieldContext } from '../FormField';
+import { FormField, useFormFieldContext } from '../FormField';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import { InputWithoutChildrenProps } from './Input.props';
@@ -46,17 +46,35 @@ const Input = forwardRef<TextInput, InputProps>(
       format,
       loading,
       clearable = false,
-      required,
+      required = true,
       inBottomSheet = false,
       style,
+      label,
+      labelVariant,
+      helperText,
+      helperIcon,
+      validText,
+      invalidText,
       ...props
     },
     ref
   ) => {
     const formFieldContext = useFormFieldContext();
-    const { disabled: formFieldDisabled } = formFieldContext;
-    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
-    const isRequired = formFieldContext?.required ?? required;
+    const inputLabel = label ?? formFieldContext?.label;
+    const inputHelperText = helperText ?? formFieldContext?.helperText;
+    const inputValidText = validText ?? formFieldContext?.validText;
+    const inputInvalidText = invalidText ?? formFieldContext?.invalidText;
+    const inputRequired = required ?? formFieldContext?.required;
+    const inputDisabled = disabled ?? formFieldContext?.disabled;
+    const inputReadonly = readonly ?? formFieldContext?.readonly;
+    const inputValidationStatus = formFieldContext?.validationStatus ?? validationStatus;
+
+    useEffect(() => {
+      if (formFieldContext?.setShouldHandleAccessibility) {
+        formFieldContext.setShouldHandleAccessibility(true);
+      }
+    }, []);
+
     const [fieldType, setFieldType] = useState<'password' | 'text'>(
       type === 'password' ? 'password' : 'text'
     );
@@ -87,61 +105,108 @@ const Input = forwardRef<TextInput, InputProps>(
       return undefined;
     })();
 
+    const getAccessibilityLabel = () => {
+      let accessibilityLabel = '';
+      if (inputLabel) {
+        accessibilityLabel = accessibilityLabel + inputLabel;
+      }
+      if (inputRequired) {
+        accessibilityLabel = accessibilityLabel + ', required';
+      }
+
+      return accessibilityLabel || props.accessibilityLabel;
+    };
+
+    const getAccessibilityHint = () => {
+      let accessibilityHint = '';
+      if (inputHelperText) {
+        accessibilityHint = accessibilityHint + inputHelperText;
+      }
+      if (inputValidationStatus !== 'initial') {
+        if (accessibilityHint.length > 0) {
+          accessibilityHint = accessibilityHint + ', ';
+        }
+        if (inputValidationStatus === 'invalid' && inputInvalidText) {
+          accessibilityHint = accessibilityHint + inputInvalidText;
+        }
+        if (inputValidationStatus === 'valid' && inputValidText) {
+          accessibilityHint = accessibilityHint + inputValidText;
+        }
+      }
+      return accessibilityHint || props.accessibilityHint;
+    };
+
     return (
-      <InputComponent
-        {...(children ? props : {})}
-        validationStatus={validationStatusFromContext}
-        isInvalid={validationStatusFromContext === 'invalid'}
-        isReadOnly={readonly}
-        isDisabled={formFieldDisabled ?? disabled}
-        isFocused={focused}
-        type={type as undefined}
-        isRequired={isRequired}
-        style={style}
+      <FormField
+        label={label}
+        labelVariant={labelVariant}
+        helperText={helperText}
+        helperIcon={helperIcon}
+        validText={validText}
+        invalidText={invalidText}
+        required={required}
+        validationStatus={validationStatus}
+        disabled={disabled}
+        readonly={readonly}
+        accessibilityHandledByChildren
       >
-        {children ? (
-          <>{children}</>
-        ) : (
-          <>
-            {!!leadingIconComponent && (
-              <InputSlot>
-                <InputIcon as={leadingIconComponent} />
-              </InputSlot>
-            )}
-            <InputField
-              // @ts-expect-error - ref forwarding issue
-              ref={inputRef}
-              type={fieldType}
-              inputMode={getInputMode}
-              inBottomSheet={inBottomSheet}
-              {...props}
-            />
-            {shouldShowClear && (
-              <InputSlot>
-                <UnstyledIconButton onPress={onClear} icon={CloseSmallIcon} />
-              </InputSlot>
-            )}
-            {loading && (
-              <InputSlot>
-                <Spinner size="xs" color={color.icon.primary} />
-              </InputSlot>
-            )}
-            {shouldShowPasswordToggle && (
-              <InputSlot>
-                <UnstyledIconButton
-                  onPress={toggleFieldType}
-                  icon={fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon}
-                />
-              </InputSlot>
-            )}
-            {!!trailingIcon && (
-              <InputSlot>
-                <InputIcon as={trailingIcon} />
-              </InputSlot>
-            )}
-          </>
-        )}
-      </InputComponent>
+        <InputComponent
+          {...(children ? props : {})}
+          validationStatus={inputValidationStatus}
+          isInvalid={inputValidationStatus === 'invalid'}
+          isReadOnly={inputReadonly}
+          isDisabled={inputDisabled}
+          isFocused={focused}
+          type={type as undefined}
+          isRequired={inputRequired}
+          style={style}
+        >
+          {children ? (
+            <>{children}</>
+          ) : (
+            <>
+              {!!leadingIconComponent && (
+                <InputSlot>
+                  <InputIcon as={leadingIconComponent} />
+                </InputSlot>
+              )}
+              <InputField
+                // @ts-expect-error - ref forwarding issue
+                ref={inputRef}
+                type={fieldType}
+                inputMode={getInputMode}
+                inBottomSheet={inBottomSheet}
+                {...props}
+                aria-label={getAccessibilityLabel()}
+                accessibilityHint={getAccessibilityHint()}
+              />
+              {shouldShowClear && (
+                <InputSlot>
+                  <UnstyledIconButton onPress={onClear} icon={CloseSmallIcon} />
+                </InputSlot>
+              )}
+              {loading && (
+                <InputSlot>
+                  <Spinner size="xs" color={color.icon.primary} />
+                </InputSlot>
+              )}
+              {shouldShowPasswordToggle && (
+                <InputSlot>
+                  <UnstyledIconButton
+                    onPress={toggleFieldType}
+                    icon={fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon}
+                  />
+                </InputSlot>
+              )}
+              {!!trailingIcon && (
+                <InputSlot>
+                  <InputIcon as={trailingIcon} />
+                </InputSlot>
+              )}
+            </>
+          )}
+        </InputComponent>
+      </FormField>
     );
   }
 );

package/src/components/Label/Label.props.ts

@@ -1,8 +1,9 @@
-import type TextProps from '../BodyText/BodyText.props';
+import { BodyTextProps } from '../BodyText';
 
-interface LabelProps extends TextProps {
+interface LabelProps extends Omit<BodyTextProps, 'size' | 'weight'> {
   nested?: boolean;
   disabled?: boolean;
+  variant?: 'heading' | 'body';
 }
 
 export default LabelProps;

package/src/components/Label/Label.tsx

@@ -1,9 +1,19 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
+import { Heading } from '../Heading';
 import LabelProps from './Label.props';
 
-const Label = ({ children, nested, disabled, style, ...props }: LabelProps) => {
+const Label = ({ children, nested, disabled, style, variant = 'body', ...props }: LabelProps) => {
   styles.useVariants({ disabled });
+
+  if (variant === 'heading') {
+    return (
+      <Heading size="md" style={[styles.text, style]} {...props}>
+        {children}
+      </Heading>
+    );
+  }
+
   return (
     <BodyText
       size="md"

package/src/components/Radio/Radio.docs.mdx

@@ -90,21 +90,21 @@ const MyComponent = () => {
 
 ## Props
 
-| Property             | Type                                | Default   | Description                                                                                          |
-| -------------------- | ----------------------------------- | --------- | ---------------------------------------------------------------------------------------------------- |
-| `value`              | string                              | -         | The value to be used in the radio input. This is the value that will be returned on form submission. |
-| `onChange`           | function                            | -         | Function called when the state of the radio changes.                                                 |
-| `disabled`           | bool                                | false     | To manually set disable to the radio.                                                                |
-| `validationStatus`   | `'valid' \| 'invalid' \| 'initial'` | -         | The validation status of the radio.                                                                  |
-| `disabled`           | `bool`                              | `false`   | To manually set disable to the radio.                                                                |
-| `label`              | `string`                            | -         | The label to be displayed next to the radio.                                                         |
-| `helperText`         | `string`                            | -         | The helper text to be displayed below the radio.                                                     |
-| `helperIcon`         | `React.ComponentType`               | -         | The icon to be displayed next to the helper text.                                                    |
-| `invalidText`        | `string`                            | -         | The invalid text to be displayed below the radio.                                                    |
-| `validText`          | `string`                            | -         | The valid text to be displayed below the radio.                                                      |
-| `showValidationIcon` | `boolean`                           | `true`    | Whether to show the validation icon.                                                                 |
-| `type`               | `'default' \| 'tile'`               | `default` | The type of the radio.                                                                               |
-| `image`              | `ReactNode`                         | -         | The image to be displayed next to the label.                                                         |
+| Property             | Type                                | Default     | Description                                                                                          |
+| -------------------- | ----------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------- |
+| `value`              | string                              | -           | The value to be used in the radio input. This is the value that will be returned on form submission. |
+| `onChange`           | function                            | -           | Function called when the state of the radio changes.                                                 |
+| `disabled`           | bool                                | false       | To manually set disable to the radio.                                                                |
+| `validationStatus`   | `'valid' \| 'invalid' \| 'initial'` | -           | The validation status of the radio.                                                                  |
+| `disabled`           | `bool`                              | `false`     | To manually set disable to the radio.                                                                |
+| `label`              | `string`                            | -           | The label to be displayed next to the radio.                                                         |
+| `helperText`         | `string`                            | -           | The helper text to be displayed below the radio.                                                     |
+| `helperIcon`         | `React.ComponentType`               | -           | The icon to be displayed next to the helper text.                                                    |
+| `invalidText`        | `string`                            | -           | The invalid text to be displayed below the radio.                                                    |
+| `validText`          | `string`                            | -           | The valid text to be displayed below the radio.                                                      |
+| `showValidationIcon` | `boolean`                           | `true`      | Whether to show the validation icon.                                                                 |
+| `type`               | `'default' \| 'tile'`               | `'default'` | The type of the radio.                                                                               |
+| `image`              | `ReactNode`                         | -           | The image to be displayed next to the label.                                                         |
 
 ## Components
 
@@ -132,21 +132,22 @@ Contains all Label related layout style props and actions. It inherits all the p
 
 Contains all Group related layout style props and actions. It inherits all the properties of React Native's [View component](https://reactnative.dev/docs/view).
 
-| Property             | Type                                | Default   | Description                                                         |
-| -------------------- | ----------------------------------- | --------- | ------------------------------------------------------------------- |
-| `value`              | string                              | -         | The value of the radio group.                                       |
-| `onChange`           | function                            | -         | The callback fired when any children Radio is checked or unchecked. |
-| `disabled`           | bool                                | -         | To manually set disable to the radio group.                         |
-| `validationStatus`   | `'valid' \| 'invalid' \| 'initial'` | -         | The validation status of the radio group.                           |
-| `label`              | `string`                            | -         | The label to be displayed above the radio group.                    |
-| `helperText`         | `string`                            | -         | The helper text to be displayed below the radio group.              |
-| `helperIcon`         | `React.ComponentType`               | -         | The icon to be displayed next to the helper text.                   |
-| `invalidText`        | `string`                            | -         | The invalid text to be displayed below the radio group.             |
-| `validText`          | `string`                            | -         | The valid text to be displayed below the radio group.               |
-| `showValidationIcon` | `boolean`                           | `true`    | Whether to show the validation icon.                                |
-| `type`               | `'default' \| 'tile'`               | `default` | The type of the radio group.                                        |
-| `direction`          | `'row' \| 'column'`                 | `column`  | The direction of the radio group.                                   |
-| `gap`                | `string`                            | -         | The gap between the radio group items.                              |
+| Property             | Type                                | Default     | Description                                                         |
+| -------------------- | ----------------------------------- | ----------- | ------------------------------------------------------------------- |
+| `value`              | string                              | -           | The value of the radio group.                                       |
+| `onChange`           | function                            | -           | The callback fired when any children Radio is checked or unchecked. |
+| `disabled`           | bool                                | -           | To manually set disable to the radio group.                         |
+| `validationStatus`   | `'valid' \| 'invalid' \| 'initial'` | -           | The validation status of the radio group.                           |
+| `label`              | `string`                            | -           | The label to be displayed above the radio group.                    |
+| `labelVariant`       | `'heading' \| 'body'`               | `'body'`    | The variant of the label text.                                      |
+| `helperText`         | `string`                            | -           | The helper text to be displayed below the radio group.              |
+| `helperIcon`         | `React.ComponentType`               | -           | The icon to be displayed next to the helper text.                   |
+| `invalidText`        | `string`                            | -           | The invalid text to be displayed below the radio group.             |
+| `validText`          | `string`                            | -           | The valid text to be displayed below the radio group.               |
+| `showValidationIcon` | `boolean`                           | `true`      | Whether to show the validation icon.                                |
+| `type`               | `'default' \| 'tile'`               | `'default'` | The type of the radio group.                                        |
+| `direction`          | `'row' \| 'column'`                 | `'column'`  | The direction of the radio group.                                   |
+| `gap`                | `string`                            | -           | The gap between the radio group items.                              |
 
 ### `RadioImage`
 

package/src/components/Radio/RadioGroup.props.ts

@@ -9,6 +9,7 @@ interface RadioGroupProps extends ViewProps {
   readonly?: boolean;
   validationStatus?: 'valid' | 'invalid' | 'initial';
   label?: string;
+  labelVariant?: 'heading' | 'body';
   helperText?: string;
   showValidationIcon?: boolean;
   invalidText?: string;

package/src/components/Radio/RadioGroup.stories.tsx

@@ -19,6 +19,11 @@ const meta = {
       control: 'text',
       description: 'The label component for the radio group.',
     },
+    labelVariant: {
+      control: 'radio',
+      options: ['heading', 'body'],
+      description: 'The variant of the label text.',
+    },
     helperText: {
       type: 'string',
       control: 'text',
@@ -51,6 +56,7 @@ const meta = {
   args: {
     disabled: false,
     label: 'Group label',
+    labelVariant: 'body',
     helperText: 'Supporting text',
     validationStatus: 'initial',
     showValidationIcon: true,