@utilitywarehouse/hearth-react-native 0.15.2 → 0.16.0

package/src/components/RadioCard/RadioCard.docs.mdx

@@ -1,18 +1,18 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import * as Stories from './RadioCardGroup.stories';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import {
-  RadioCard,
-  RadioCardGroup,
-  Center,
-  Box,
-  Heading,
   BodyText,
+  Box,
+  Center,
   DetailText,
-  UL,
+  Heading,
   LI,
+  RadioCard,
+  RadioCardGroup,
+  UL,
 } from '../..';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './RadioCardGroup.stories';
 
 <Meta title="Components / Radio Card" />
 
@@ -92,16 +92,17 @@ const MyComponent = () => {
 
 The `RadioCard` component accepts the following props:
 
-| Property         | Type                                                                                                    | Default | Description                                                                                               |
-| ---------------- | ------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
-| `value`          | string                                                                                                  | -       | The value to be used in the radio card input. This is the value that will be returned on form submission. |
-| `onChange`       | `(isSelected: boolean) => void`                                                                         | -       | Function called when the state of the radio card changes.                                                 |
-| `children`       | `React.ReactNode`                                                                                       | -       | The content to be displayed inside the radio card.                                                        |
-| `label`          | `string`                                                                                                | -       | The label to be displayed next to the radio card.                                                         |
-| `flexDirection`  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                | -       | Sets the direction of the flex items.                                                                     |
-| `flexWrap`       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                  | -       | Sets whether flex items are forced onto one line or can wrap.                                             |
-| `alignItems`     | `'flex-start' \| 'flex-end' \| 'center' \|`<br />` 'stretch' \| 'baseline'`                             | -       | Sets the alignment of flex items on the cross axis.                                                       |
-| `justifyContent` | `'flex-start' \| 'flex-end' \| 'center' \|`<br />` 'space-between' \| 'space-around' \| 'space-evenly'` | -       | Sets the alignment of flex items on the main axis.                                                        |
+| Property         | Type                                                                                                    | Default  | Description                                                                                               |
+| ---------------- | ------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------- |
+| `value`          | string                                                                                                  | -        | The value to be used in the radio card input. This is the value that will be returned on form submission. |
+| `onChange`       | `(isSelected: boolean) => void`                                                                         | -        | Function called when the state of the radio card changes.                                                 |
+| `children`       | `React.ReactNode`                                                                                       | -        | The content to be displayed inside the radio card.                                                        |
+| `label`          | `string`                                                                                                | -        | The label to be displayed next to the radio card.                                                         |
+| `labelVariant`   | `'heading' \| 'body'`                                                                                   | `'body'` | The variant of the label text.                                                                            |
+| `flexDirection`  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                | -        | Sets the direction of the flex items.                                                                     |
+| `flexWrap`       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                  | -        | Sets whether flex items are forced onto one line or can wrap.                                             |
+| `alignItems`     | `'flex-start' \| 'flex-end' \| 'center' \|`<br />` 'stretch' \| 'baseline'`                             | -        | Sets the alignment of flex items on the cross axis.                                                       |
+| `justifyContent` | `'flex-start' \| 'flex-end' \| 'center' \|`<br />` 'space-between' \| 'space-around' \| 'space-evenly'` | -        | Sets the alignment of flex items on the main axis.                                                        |
 
 ## Components
 
@@ -113,13 +114,13 @@ Contains all RadioCard related layout style props and actions. It inherits all t
 
 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 currently selected `RadioCard`.                                                           |
-| `onChange`       | `(value: string) => void`                                                                                | -       | Callback fired when the selected `RadioCard` changes.                                                      |
-| `gap`            | `keyof typeof space`                                                                                     | -       | The gap between the `RadioCard` items.                                                                     |
-| `columns`        | `GridProps['columns']`                                                                                   | -       | If set, the group will use a grid layout with the specified number of columns. Otherwise, it uses flexbox. |
-| `flexDirection`  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                 | `row`   | (Flexbox only) Sets the direction of the flex items.                                                       |
-| `flexWrap`       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                   | `wrap`  | (Flexbox only) Sets whether flex items are forced onto one line or can wrap.                               |
-| `alignItems`     | `'flex-start' \| 'flex-end' \| 'center' \| `<br />`'stretch' \| 'baseline'`                              | -       | (Flexbox only) Sets the alignment of flex items on the cross axis.                                         |
-| `justifyContent` | `'flex-start' \| 'flex-end' \| 'center' \| `<br /> `'space-between' \| 'space-around' \| 'space-evenly'` | -       | (Flexbox only) Sets the alignment of flex items on the main axis.                                          |
+| Property         | Type                                                                                                     | Default  | Description                                                                                                |
+| ---------------- | -------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------- |
+| `value`          | `string`                                                                                                 | -        | The value of the currently selected `RadioCard`.                                                           |
+| `onChange`       | `(value: string) => void`                                                                                | -        | Callback fired when the selected `RadioCard` changes.                                                      |
+| `gap`            | `keyof typeof space`                                                                                     | -        | The gap between the `RadioCard` items.                                                                     |
+| `columns`        | `GridProps['columns']`                                                                                   | -        | If set, the group will use a grid layout with the specified number of columns. Otherwise, it uses flexbox. |
+| `flexDirection`  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                 | `'row'`  | (Flexbox only) Sets the direction of the flex items.                                                       |
+| `flexWrap`       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                   | `'wrap'` | (Flexbox only) Sets whether flex items are forced onto one line or can wrap.                               |
+| `alignItems`     | `'flex-start' \| 'flex-end' \| 'center' \| `<br />`'stretch' \| 'baseline'`                              | -        | (Flexbox only) Sets the alignment of flex items on the cross axis.                                         |
+| `justifyContent` | `'flex-start' \| 'flex-end' \| 'center' \| `<br /> `'space-between' \| 'space-around' \| 'space-evenly'` | -        | (Flexbox only) Sets the alignment of flex items on the main axis.                                          |

package/src/components/RadioCard/RadioCard.props.ts

@@ -7,6 +7,7 @@ interface RadioCardProps extends Omit<PressableProps, 'children'> {
   onChange?: (isSelected: boolean) => void;
   children?: ViewProps['children'];
   label?: string;
+  labelVariant?: 'heading' | 'body';
   flexDirection?: ViewStyle['flexDirection'];
   flexWrap?: ViewStyle['flexWrap'];
   alignItems?: ViewStyle['alignItems'];

package/src/components/RadioCard/RadioCard.tsx

@@ -27,7 +27,13 @@ RadioCardIndicator.displayName = 'RadioCardIndicator';
 RadioCardIcon.displayName = 'RadioCardIcon';
 RadioCardLabel.displayName = 'RadioCardLabel';
 
-const RadioCard = ({ children, label, contentStyle, ...props }: RadioCardProps) => {
+const RadioCard = ({
+  children,
+  label,
+  labelVariant = 'body',
+  contentStyle,
+  ...props
+}: RadioCardProps) => {
   const { computedStyles } = useStyleProps(props);
   return (
     <RadioCardComponent {...props}>
@@ -35,7 +41,7 @@ const RadioCard = ({ children, label, contentStyle, ...props }: RadioCardProps)
         <RadioCardIndicator>
           <RadioCardIcon />
         </RadioCardIndicator>
-        {!!label && <RadioCardLabel>{label}</RadioCardLabel>}
+        {!!label && <RadioCardLabel variant={labelVariant}>{label}</RadioCardLabel>}
       </View>
       {!!children && <View style={[computedStyles, contentStyle]}>{children}</View>}
     </RadioCardComponent>

package/src/components/Select/Select.props.ts

@@ -43,6 +43,16 @@ interface SelectProps extends ViewProps {
    * Label for the select
    */
   label?: string;
+  /**
+   * The variant of the label text.
+   *
+   * Supported values are:
+   * - `'heading'` – use heading text styling for the label.
+   * - `'body'` – use body text styling for the label.
+   *
+   * @default 'body'.
+   */
+  labelVariant?: 'heading' | 'body';
   /**
    * Placeholder text to show when no value is selected
    */

package/src/components/Select/Select.tsx

@@ -23,6 +23,7 @@ const Select = ({
   value,
   onValueChange,
   label,
+  labelVariant = 'body',
   placeholder = 'Select an option',
   disabled = false,
   leadingIcon: LeadingIcon,
@@ -123,9 +124,9 @@ const Select = ({
     <View {...rest} style={[styles.container, rest.style]}>
       {!!label && (
         <View>
-          <Label>
+          <Label variant={labelVariant}>
             {label}
-            {!isRequired && <Label> (Optional)</Label>}
+            {!isRequired && <Label variant={labelVariant}> (Optional)</Label>}
           </Label>
         </View>
       )}

package/src/components/Textarea/Textarea.docs.mdx

@@ -1,8 +1,8 @@
-import { Meta, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
-import * as Stories from './Textarea.stories';
-import { Textarea, TextareaField, Center, Pressable } from '../..';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+import { Center, Pressable, Textarea, TextareaField } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Textarea.stories';
 
 <Meta title="Forms / Textarea" />
 
@@ -19,6 +19,7 @@ The input component is a text field that allows users to enter text, numbers, or
 - [Props](#props)
   - [`Textarea`](#input)
   - [`TextareaField`](#inputfield)
+- [Examples](#examples)
 - [Accessibility](#accessibility)
 
 ## Playground
@@ -61,14 +62,21 @@ 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.                                                                                                                                                |
-| 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)**                                                                                  |
+| 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       | `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'.                                                                                                                    |
+| required         | `boolean`                          | `false`     | Whether the input is required. **(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)**                                                                                  |
 
 If the `leadingIcon` or `trailingIcon` props are used, the `Textarea` component should not have any children.
 
@@ -79,11 +87,48 @@ The `TextareaField` inherits all of the React Native [`TextTextarea` props](http
 | 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.                               |
+| 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.                               |
+
+## Examples
+
+### With Label and Helper Text
+
+The `Textarea` component can display a label and helper text by passing the appropriate props.
+
+<UsageWrap>
+  <Center>
+    <Textarea
+      label="Description"
+      helperText="Provide a detailed description"
+      placeholder="Enter your text here..."
+      onChange={() => console.log('###')}
+    />
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Textarea } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = useState('');
+  const handleChange = e => {
+    setValue(e.target.value);
+  };
+  return (
+    <Textarea
+      label="Description"
+      helperText="Provide a detailed description"
+      placeholder="Enter your text here..."
+      value={value}
+      onTextChange={handleChange}
+    />
+  );
+};
+```
 
 ## Accessibility
 
@@ -95,6 +140,9 @@ We have outlined the various features that ensure the Textarea component is acce
 
 ### Screen Reader
 
+- When setting the label prop, it is associated with the Textarea using aria-label.
+- When setting the helperText prop, it is associated with the Textarea using aria-describedby.
+- The required prop to indicate if the Textarea 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 Textarea
 - Setting aria-traits and aria-hint to provide contextual information about the various states of the Textarea, such as "double tap to edit".

package/src/components/Textarea/Textarea.props.ts

@@ -24,6 +24,14 @@ export interface TextareaBaseProps {
   readonly?: boolean;
   focused?: boolean;
   placeholder?: string;
+  label?: string;
+  labelVariant?: 'heading' | 'body';
+  helperText?: string;
+  helperIcon?: React.ComponentType;
+  validText?: string;
+  invalidText?: string;
+  required?: boolean;
+  isInBottomSheet?: boolean;
 }
 
 export interface TextareaWithChildrenProps extends TextareaBaseProps, ViewProps {}

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,5 +1,5 @@
-import { Textarea } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
+import { Textarea } from '.';
 
 const meta = {
   title: 'Stories / Textarea',
@@ -13,13 +13,34 @@ const meta = {
       description: 'The Textarea field placeholder',
       defaultValue: '',
     },
-
+    label: {
+      control: 'text',
+      description: 'The label for the Textarea component',
+      defaultValue: 'Textarea label',
+    },
+    labelVariant: {
+      control: 'radio',
+      options: ['heading', 'body'],
+      description: 'The label variant for the Textarea component',
+    },
+    helperText: {
+      control: 'text',
+      description: 'The helper text for the Textarea component',
+    },
     validationStatus: {
       control: 'select',
       options: ['initial', 'valid', 'invalid'],
       description: 'The validation status of the Textarea component',
       defaultValue: 'initial',
     },
+    invalidText: {
+      control: 'text',
+      description: 'The invalid text for the Textarea component',
+    },
+    validText: {
+      control: 'text',
+      description: 'The valid text for the Textarea component',
+    },
     disabled: {
       control: 'boolean',
       description: 'Disable the Textarea component',

package/src/components/Textarea/Textarea.tsx

@@ -1,9 +1,10 @@
 import { createTextarea } from '@gluestack-ui/textarea';
 import type TextareaProps from './Textarea.props';
 
-import TextareaRoot from './TextareaRoot';
+import { useEffect } from 'react';
+import { FormField, useFormFieldContext } from '../FormField';
 import TextareaFieldComponent from './TextareaField';
-import { useFormFieldContext } from '../FormField';
+import TextareaRoot from './TextareaRoot';
 
 export const TextareaComponent = createTextarea({
   Root: TextareaRoot,
@@ -18,29 +19,93 @@ const Textarea = ({
   disabled,
   focused,
   readonly,
+  label,
+  labelVariant,
+  helperText,
+  validText,
+  invalidText,
+  required,
+  helperIcon,
   ...props
 }: TextareaProps) => {
   const formFieldContext = useFormFieldContext();
-  const { disabled: formFieldDisabled } = formFieldContext;
-  const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+  const textareaLabel = label ?? formFieldContext?.label;
+  const textareaHelperText = helperText ?? formFieldContext?.helperText;
+  const textareaValidText = validText ?? formFieldContext?.validText;
+  const textareaInvalidText = invalidText ?? formFieldContext?.invalidText;
+  const textareaRequired = required ?? formFieldContext?.required;
+  const textareaDisabled = disabled ?? formFieldContext?.disabled;
+  const textareaReadonly = readonly ?? formFieldContext?.readonly;
+  const textareaValidationStatus = formFieldContext?.validationStatus ?? validationStatus;
+
+  useEffect(() => {
+    if (formFieldContext?.setShouldHandleAccessibility) {
+      formFieldContext.setShouldHandleAccessibility(true);
+    }
+  }, []);
+
+  const getAccessibilityLabel = () => {
+    let accessibilityLabel = '';
+    if (textareaLabel) {
+      accessibilityLabel = accessibilityLabel + textareaLabel;
+    }
+    if (textareaRequired) {
+      accessibilityLabel = accessibilityLabel + ', required';
+    }
+
+    return accessibilityLabel || props.accessibilityLabel;
+  };
+
+  const getAccessibilityHint = () => {
+    let accessibilityHint = '';
+    if (textareaValidationStatus !== 'initial') {
+      if (accessibilityHint.length > 0) {
+        accessibilityHint = accessibilityHint + ', ';
+      }
+      if (textareaValidationStatus === 'invalid' && textareaInvalidText) {
+        accessibilityHint = accessibilityHint + textareaInvalidText;
+      }
+      if (textareaValidationStatus === 'valid' && textareaValidText) {
+        accessibilityHint = accessibilityHint + textareaValidText;
+      }
+    }
+    return accessibilityHint || props.accessibilityHint;
+  };
 
   return (
-    <TextareaComponent
-      {...(children ? props : {})}
-      validationStatus={validationStatusFromContext}
-      isInvalid={validationStatusFromContext === 'invalid'}
-      isReadOnly={readonly}
-      isDisabled={formFieldDisabled ?? disabled}
-      isFocused={focused}
+    <FormField
+      label={label}
+      labelVariant={labelVariant}
+      helperText={helperText}
+      helperIcon={helperIcon}
+      validText={validText}
+      invalidText={invalidText}
+      required={required}
+      validationStatus={validationStatus}
+      disabled={disabled}
+      readonly={readonly}
+      accessibilityHandledByChildren
     >
-      {children ? (
-        <>{children}</>
-      ) : (
-        <>
-          <TextareaField {...props} />
-        </>
-      )}
-    </TextareaComponent>
+      <TextareaComponent
+        {...(children ? props : {})}
+        validationStatus={textareaValidationStatus}
+        isInvalid={textareaValidationStatus === 'invalid'}
+        isReadOnly={textareaReadonly}
+        isDisabled={textareaDisabled}
+        isFocused={focused}
+        required={textareaRequired}
+        aria-label={getAccessibilityLabel()}
+        accessibilityHint={getAccessibilityHint()}
+      >
+        {children ? (
+          <>{children}</>
+        ) : (
+          <>
+            <TextareaField {...props} />
+          </>
+        )}
+      </TextareaComponent>
+    </FormField>
   );
 };
 

package/src/components/VerificationInput/VerificationInput.docs.mdx

@@ -54,6 +54,7 @@ The component accepts the following props:
 | `value`            | `string`                            | -           | The value of the input.                                      |
 | `onChangeText`     | `(text: string) => void`            | -           | Callback when the value changes.                             |
 | `label`            | `string`                            | -           | The label for the input.                                     |
+| `labelVariant`     | `'heading' \| 'body'`               | `'body'`    | The variant of the label text.                               |
 | `helperText`       | `string`                            | -           | Helper text to display below the input.                      |
 | `helperIcon`       | `ComponentType`                     | -           | Icon to display alongside the helper text.                   |
 | `validationStatus` | `'initial' \| 'valid' \| 'invalid'` | `'initial'` | The validation status of the input.                          |

package/src/components/VerificationInput/VerificationInput.props.ts

@@ -14,6 +14,10 @@ export interface VerificationInputProps extends ViewProps {
    * The label for the input.
    */
   label?: string;
+  /**
+   * The label variant for the input.
+   */
+  labelVariant?: 'heading' | 'body';
   /**
    * Helper text to display below the input.
    */
@@ -49,4 +53,3 @@ export interface VerificationInputProps extends ViewProps {
 }
 
 export default VerificationInputProps;
-

package/src/components/VerificationInput/VerificationInput.tsx

@@ -9,6 +9,7 @@ const VerificationInput = ({
   value = '',
   onChangeText,
   label,
+  labelVariant = 'body',
   helperText,
   helperIcon,
   validationStatus = 'initial',
@@ -32,6 +33,7 @@ const VerificationInput = ({
   return (
     <FormField
       label={label}
+      labelVariant={labelVariant}
       helperText={helperText}
       helperIcon={helperIcon}
       validationStatus={validationStatus}