diff --git a/.changeset/free-mugs-sin.md b/.changeset/free-mugs-sin.md
new file mode 100644
index 0000000000..18078c7a2c
--- /dev/null
+++ b/.changeset/free-mugs-sin.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix accesbility issue inside Pagination PerPage label.
diff --git a/.changeset/small-coins-wink.md b/.changeset/small-coins-wink.md
new file mode 100644
index 0000000000..c79f39f6b3
--- /dev/null
+++ b/.changeset/small-coins-wink.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/form": patch
+---
+
+use new useField hook to TimeInputField, TextAreaField which allow usage of the rhf register api"
diff --git a/packages/form/src/components/KeyValueField/index.tsx b/packages/form/src/components/KeyValueField/index.tsx
index 50216d82bc..a062d518d2 100644
--- a/packages/form/src/components/KeyValueField/index.tsx
+++ b/packages/form/src/components/KeyValueField/index.tsx
@@ -9,7 +9,7 @@ import type { Control, FieldArrayPath, FieldValues } from 'react-hook-form'
 import { TextInputField } from '../TextInputField'
 
 type InputKeyProps = {
-  label: ComponentProps<typeof TextInputField>['label']
+  label: NonNullable<ComponentProps<typeof TextInputField>['label']>
   required?: ComponentProps<typeof TextInputField>['required']
   regex?: ComponentProps<typeof TextInputField>['regex']
 }
diff --git a/packages/form/src/components/TextAreaField/index.tsx b/packages/form/src/components/TextAreaField/index.tsx
index 54317b65b5..f1aaebe5bf 100644
--- a/packages/form/src/components/TextAreaField/index.tsx
+++ b/packages/form/src/components/TextAreaField/index.tsx
@@ -1,12 +1,11 @@
 'use client'
 
 import { TextArea } from '@ultraviolet/ui'
+import type { LabelProps } from '@ultraviolet/ui'
 import type { ComponentProps, KeyboardEvent } from 'react'
-import { useController } from 'react-hook-form'
-import type { FieldPath, FieldValues, Path, PathValue } from 'react-hook-form'
-import { useErrors } from '../../providers'
+import type { FieldPath, FieldValues } from 'react-hook-form'
+import { useField } from '../../hooks/useField'
 import type { BaseFieldProps } from '../../types'
-import { validateRegex } from '../../utils/validateRegex'
 
 export type TextAreaFieldProps<
   TFieldValues extends FieldValues,
@@ -15,7 +14,7 @@ export type TextAreaFieldProps<
   Omit<ComponentProps<typeof TextArea>, 'value' | 'error' | 'name' | 'onChange'> & {
     regex?: (RegExp | RegExp[])[]
     submitOnEnter?: boolean
-  }
+  } & LabelProps
 
 /**
  * This component offers a form field based on Ultraviolet UI TextArea component
@@ -25,43 +24,11 @@ export const TextAreaField = <
   TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   control,
-  label,
-  onChange,
-  minLength,
-  maxLength,
-  name,
-  onBlur,
-  onKeyDown,
-  required,
-  regex: regexes,
   submitOnEnter,
-  validate,
-  errorLabel,
-  'aria-label': ariaLabel,
+  onKeyDown,
   ...props
 }: TextAreaFieldProps<TFieldValues, TFieldName>) => {
-  const { getError } = useErrors()
-
-  const {
-    field,
-    fieldState: { error },
-  } = useController<TFieldValues, TFieldName>({
-    control,
-    name,
-    rules: {
-      maxLength,
-      minLength,
-      required,
-      validate: {
-        ...(regexes
-          ? {
-              pattern: value => validateRegex(value, regexes),
-            }
-          : {}),
-        ...validate,
-      },
-    },
-  })
+  const { fieldProps } = useField(props)
 
   const onKeyDownHandler = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (submitOnEnter && event.key === 'Enter' && !event.shiftKey) {
@@ -80,36 +47,7 @@ export const TextAreaField = <
     }
   }
 
-  return (
-    <TextArea
-      {...props}
-      error={getError(
-        {
-          label: errorLabel ?? label ?? ariaLabel ?? name,
-          maxLength,
-          minLength,
-          regex: regexes,
-          value: field.value,
-        },
-        error,
-      )}
-      maxLength={maxLength}
-      minLength={minLength}
-      name={name}
-      onBlur={event => {
-        onBlur?.(event)
-        field.onBlur()
-      }}
-      onChange={event => {
-        field.onChange(event)
-        onChange?.(event as PathValue<TFieldValues, Path<TFieldValues>>)
-      }}
-      onKeyDown={onKeyDownHandler}
-      required={required}
-      value={field.value}
-      {...(label ? { label } : { 'aria-label': ariaLabel! })}
-    />
-  )
+  return <TextArea {...props} {...fieldProps} onKeyDown={onKeyDownHandler} />
 }
 
 TextAreaField.displayName = 'TextAreaField'
diff --git a/packages/form/src/components/TimeInputField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/TimeInputField/__tests__/__snapshots__/index.test.tsx.snap
index 69e041a3dc..7237726d1f 100644
--- a/packages/form/src/components/TimeInputField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/TimeInputField/__tests__/__snapshots__/index.test.tsx.snap
@@ -19,7 +19,6 @@ exports[`textInputField > should render correctly 1`] = `
           Test
         </label>
         <div
-          aria-required="false"
           class="uv_yl1780 uv_yl1781 uv_yl1785 uv_toi52u0 uv_toi52ud uv_toi52u2j uv_toi52u77"
         >
           <div
@@ -110,7 +109,6 @@ exports[`textInputField > should render correctly disabled 1`] = `
           Test
         </label>
         <div
-          aria-required="false"
           class="uv_yl1780 uv_yl1781 uv_yl1785 uv_toi52u0 uv_toi52ud uv_toi52u2j uv_toi52u77"
         >
           <div
diff --git a/packages/form/src/components/TimeInputField/index.tsx b/packages/form/src/components/TimeInputField/index.tsx
index 4b105d273e..9d85b08b8c 100644
--- a/packages/form/src/components/TimeInputField/index.tsx
+++ b/packages/form/src/components/TimeInputField/index.tsx
@@ -2,9 +2,8 @@
 
 import { TimeInput } from '@ultraviolet/ui'
 import type { ComponentProps } from 'react'
-import { useController } from 'react-hook-form'
-import type { FieldPath, FieldValues, Path, PathValue } from 'react-hook-form'
-import { useErrors } from '../../providers'
+import type { FieldPath, FieldValues } from 'react-hook-form'
+import { useField } from '../../hooks/useField'
 import type { BaseFieldProps } from '../../types'
 
 type TimeInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<
@@ -21,54 +20,12 @@ export const TimeInputField = <
   TFieldValues extends FieldValues,
   TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
-  onChange,
-  label,
-  required = false,
-  name,
-  onBlur,
-  'aria-label': ariaLabel,
-  shouldUnregister,
   control,
-  errorLabel,
   ...props
 }: TimeInputFieldProps<TFieldValues, TFieldName>) => {
-  const { getError } = useErrors()
+  const { fieldProps } = useField(props)
 
-  const {
-    field,
-    fieldState: { error },
-  } = useController<TFieldValues, TFieldName>({
-    control,
-    name,
-    rules: {
-      required,
-    },
-    shouldUnregister,
-  })
-
-  return (
-    <TimeInput
-      {...props}
-      error={getError(
-        {
-          label: errorLabel ?? label ?? ariaLabel ?? name,
-          value: field.value,
-        },
-        error,
-      )}
-      label={label}
-      onBlur={event => {
-        onBlur?.(event)
-        field.onBlur()
-      }}
-      onChange={value => {
-        field.onChange(value)
-        onChange?.(value as PathValue<TFieldValues, Path<TFieldValues>>)
-      }}
-      required={required}
-      value={field.value}
-    />
-  )
+  return <TimeInput {...props} {...fieldProps} />
 }
 
 TimeInputField.displayName = 'TimeInputField'
diff --git a/packages/form/src/hooks/useField.tsx b/packages/form/src/hooks/useField.tsx
index 66f8525bc6..845ad2f06a 100644
--- a/packages/form/src/hooks/useField.tsx
+++ b/packages/form/src/hooks/useField.tsx
@@ -8,7 +8,7 @@ import { useRegisterField } from './useRegisterField'
 export type UseFieldProps<
   TFieldValues extends FieldValues,
   TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = BaseFieldProps<TFieldValues, TFieldName> & Omit<MetaField, 'label'> & { 'aria-label'?: string }
+> = BaseFieldProps<TFieldValues, TFieldName> & MetaField
 
 export type FieldProps<
   TFieldValues extends FieldValues,
diff --git a/packages/form/src/types.ts b/packages/form/src/types.ts
index 1b827cdce5..c7f07d431a 100644
--- a/packages/form/src/types.ts
+++ b/packages/form/src/types.ts
@@ -1,4 +1,5 @@
-import type { FocusEvent, ReactNode } from 'react'
+import type { BaseFormComponentProps } from '@ultraviolet/ui'
+import type { FocusEvent } from 'react'
 import type {
   Control,
   FieldError,
@@ -23,7 +24,7 @@ export type MetaField = {
   regex?: (RegExp | RegExp[])[]
   minDate?: Date
   maxDate?: Date
-  label: string
+  label?: string
   value?: string | number
 }
 
@@ -48,12 +49,10 @@ export type FormErrors = {
 export type BaseFieldProps<
   TFieldValues extends FieldValues = FieldValues,
   TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
+> = BaseFormComponentProps & {
   name: TFieldName
-  required?: boolean
   validate?: Record<string, Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues>>
   defaultValue?: PathValue<TFieldValues, Path<TFieldValues>>
-  label?: string
   value?: PathValue<TFieldValues, Path<TFieldValues>>
   onChange?: (value?: PathValue<TFieldValues, TFieldName>) => void
   onBlur?: (event?: FocusEvent) => void
@@ -62,20 +61,6 @@ export type BaseFieldProps<
   errorLabel?: string
 }
 
-/**
- * Classic prop type where label is a ReactNode and aria-label is a string.
- * One or another is required.
- */
-export type LabelProp =
-  | {
-      label: ReactNode
-      'aria-label'?: never
-    }
-  | {
-      label?: never
-      'aria-label': string
-    }
-
 export type PascalToCamelCase<S extends string> = S extends `${infer P1}${infer P2}` ? `${Lowercase<P1>}${P2}` : S
 
 export type RemoveSuffix<S extends string, Suffix extends string> = S extends `${infer Prefix}${Suffix}` ? Prefix : S
diff --git a/packages/ui/src/components/Checkbox/index.tsx b/packages/ui/src/components/Checkbox/index.tsx
index 084b37192e..0f8839a4d9 100644
--- a/packages/ui/src/components/Checkbox/index.tsx
+++ b/packages/ui/src/components/Checkbox/index.tsx
@@ -4,6 +4,7 @@ import { cn } from '@ultraviolet/utils'
 import { forwardRef, useId } from 'react'
 import type { InputHTMLAttributes, ReactNode } from 'react'
 import { hasHelperText } from '../../helpers/hasHelperText'
+import type { BaseFormComponentProps, CheckboxLabelProp } from '../../types'
 import { Description } from '../Description'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
@@ -11,43 +12,31 @@ import { Tooltip } from '../Tooltip'
 import { CheckboxIconContainer } from './CheckboxIconContainer'
 import { checkboxStyle } from './styles.css'
 
-type LabelProp =
-  | {
-      children: ReactNode
-      'aria-label'?: never
-    }
-  | {
-      children?: never
-      'aria-label': string
-    }
-
-type CheckboxProps = {
-  error?: ReactNode
-  helper?: ReactNode
-  disabled?: boolean
-  checked?: boolean | 'indeterminate'
-  className?: string
-  ['data-visibility']?: string
-  required?: boolean
-  'data-testid'?: string
-  tooltip?: string
-  size?: 'default' | 'small'
-} & Pick<
-  InputHTMLAttributes<HTMLInputElement>,
-  | 'autoFocus'
-  | 'id'
-  | 'name'
-  | 'onBlur'
-  | 'onChange'
-  | 'onKeyDown'
-  | 'onClick'
-  | 'onFocus'
-  | 'tabIndex'
-  | 'value'
-  | 'style'
-  | 'aria-describedby'
-> &
-  LabelProp
+type CheckboxProps = BaseFormComponentProps &
+  CheckboxLabelProp & {
+    error?: ReactNode
+    helper?: ReactNode
+    checked?: boolean | 'indeterminate'
+    className?: string
+    ['data-visibility']?: string
+    'data-testid'?: string
+    tooltip?: string
+    size?: 'default' | 'small'
+  } & Pick<
+    InputHTMLAttributes<HTMLInputElement>,
+    | 'autoFocus'
+    | 'id'
+    | 'name'
+    | 'onBlur'
+    | 'onChange'
+    | 'onKeyDown'
+    | 'onClick'
+    | 'onFocus'
+    | 'tabIndex'
+    | 'value'
+    | 'style'
+    | 'aria-describedby'
+  >
 
 /**
  * Checkbox is an input component used to select or deselect an option.
diff --git a/packages/ui/src/components/NumberInput/types.ts b/packages/ui/src/components/NumberInput/types.ts
index f36b722d36..be819ce86f 100644
--- a/packages/ui/src/components/NumberInput/types.ts
+++ b/packages/ui/src/components/NumberInput/types.ts
@@ -1,8 +1,9 @@
 import type { RefObject, InputHTMLAttributes, ReactNode } from 'react'
 import type { SIZES } from './constant'
 type Sizes = keyof typeof SIZES
+import type { BaseFormComponentProps } from '../../types'
 
-export type NumberInputProps = {
+export type NumberInputProps = BaseFormComponentProps & {
   size?: Sizes
   /**
    * Text displayed into component at the right of number value.
@@ -11,7 +12,6 @@ export type NumberInputProps = {
   tooltip?: string
   className?: string
   'data-testid'?: string
-  label?: string
   /**
    * Label description displayed right next to the label. It allows you to customize the label content.
    */
@@ -28,21 +28,9 @@ export type NumberInputProps = {
   min?: number
   max?: number
 } & Pick<
-  InputHTMLAttributes<HTMLInputElement>,
-  | 'onFocus'
-  | 'onBlur'
-  | 'name'
-  | 'id'
-  | 'placeholder'
-  | 'aria-label'
-  | 'disabled'
-  | 'step'
-  | 'readOnly'
-  | 'required'
-  | 'autoFocus'
-  | 'style'
-  | 'aria-describedby'
->
+    InputHTMLAttributes<HTMLInputElement>,
+    'onFocus' | 'onBlur' | 'placeholder' | 'disabled' | 'step' | 'readOnly' | 'autoFocus' | 'style' | 'aria-describedby'
+  >
 
 export type ControlsProps = {
   controls?: NumberInputProps['controls']
diff --git a/packages/ui/src/components/Pagination/PerPage.tsx b/packages/ui/src/components/Pagination/PerPage.tsx
index 9ff7867cc4..b9ae761b6b 100644
--- a/packages/ui/src/components/Pagination/PerPage.tsx
+++ b/packages/ui/src/components/Pagination/PerPage.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { Dispatch, SetStateAction } from 'react'
+import { useId } from 'react'
 import { SelectInput } from '../SelectInput'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
@@ -51,13 +52,17 @@ export const PerPage = ({
     setPerPage(intValue)
   }
 
+  const labelText = perPageText ?? 'Items per page'
+  const labelId = useId()
+
   return (
     <Stack alignItems="center" direction="row" gap="2">
-      <Text as="span" prominence="weak" sentiment="neutral" variant="body">
-        {perPageText ?? 'Items per page'}
+      <Text as="label" id={labelId} prominence="weak" sentiment="neutral" variant="body">
+        {labelText}
       </Text>
       <SelectInput
         name="select-items-per-page"
+        aria-labelledby={labelId}
         onChange={handleChange}
         options={optionsItemsPerPage}
         portalTarget={portalTarget}
diff --git a/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap
index 156ff04ace..d613b11d99 100644
--- a/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap
@@ -1061,19 +1061,20 @@ exports[`pagination > should render correctly with perPage - default values 1`]
       <div
         class="styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_gap_1rem_xxsmall__toi52u3v"
       >
-        <span
+        <label
           class="style__m4c9ow0 style_prominence_weak__m4c9ow7 style_sentiment_neutral__m4c9owb style_variant_body__m4c9owj style_undefined_compound_3__m4c9ow1d style_undefined_compound_67__m4c9ow35"
+          id="_r_1k_"
         >
           Items per page
-        </span>
+        </label>
         <div
           aria-label="select-items-per-page"
           class="styles__uf6pag0"
           style="width: fit-content;"
         >
           <div
-            aria-controls="_r_1n_"
-            aria-describedby="_r_1n_"
+            aria-controls="_r_1o_"
+            aria-describedby="_r_1o_"
             class="styles__w40vpo9 styles_fullWidth_true__w40vpob"
             tabindex="-1"
           >
@@ -1081,13 +1082,13 @@ exports[`pagination > should render correctly with perPage - default values 1`]
               class="styles__toi52u0 styles_flexDirection_column_xxsmall__toi52u2d styles_gap_0.25rem_xxsmall__toi52u5j"
             >
               <div
-                aria-controls="_r_1n_"
+                aria-controls="_r_1o_"
                 aria-expanded="false"
                 class="selectBar__r8qe46 selectBar__r8qe45 selectBar_size_small__r8qe4c selectBar_state_neutral__r8qe4e"
                 data-disabled="false"
                 data-readonly="false"
                 data-testid="select-input-select-items-per-page"
-                id="_r_1l_"
+                id="_r_1m_"
                 role="combobox"
                 tabindex="0"
               >
@@ -1248,19 +1249,20 @@ exports[`pagination > should render correctly with perPage 1`] = `
       <div
         class="styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_gap_1rem_xxsmall__toi52u3v"
       >
-        <span
+        <label
           class="style__m4c9ow0 style_prominence_weak__m4c9ow7 style_sentiment_neutral__m4c9owb style_variant_body__m4c9owj style_undefined_compound_3__m4c9ow1d style_undefined_compound_67__m4c9ow35"
+          id="_r_26_"
         >
           test
-        </span>
+        </label>
         <div
           aria-label="select-items-per-page"
           class="styles__uf6pag0"
           style="width: fit-content;"
         >
           <div
-            aria-controls="_r_28_"
-            aria-describedby="_r_28_"
+            aria-controls="_r_2a_"
+            aria-describedby="_r_2a_"
             class="styles__w40vpo9 styles_fullWidth_true__w40vpob"
             tabindex="-1"
           >
@@ -1268,13 +1270,13 @@ exports[`pagination > should render correctly with perPage 1`] = `
               class="styles__toi52u0 styles_flexDirection_column_xxsmall__toi52u2d styles_gap_0.25rem_xxsmall__toi52u5j"
             >
               <div
-                aria-controls="_r_28_"
+                aria-controls="_r_2a_"
                 aria-expanded="false"
                 class="selectBar__r8qe46 selectBar__r8qe45 selectBar_size_small__r8qe4c selectBar_state_neutral__r8qe4e"
                 data-disabled="false"
                 data-readonly="false"
                 data-testid="select-input-select-items-per-page"
-                id="_r_26_"
+                id="_r_28_"
                 role="combobox"
                 tabindex="0"
               >
diff --git a/packages/ui/src/components/SelectInput/index.tsx b/packages/ui/src/components/SelectInput/index.tsx
index 494b060af8..5bd3924099 100644
--- a/packages/ui/src/components/SelectInput/index.tsx
+++ b/packages/ui/src/components/SelectInput/index.tsx
@@ -4,6 +4,7 @@ import { cn } from '@ultraviolet/utils'
 import { useId, useRef } from 'react'
 import type { ComponentProps, HTMLAttributes, ReactNode } from 'react'
 import { hasHelperText } from '../../helpers/hasHelperText'
+import type { BaseFormComponentProps, PartialLabelProps } from '../../types'
 import { Description } from '../Description'
 import { Label } from '../Label'
 import type { Popup } from '../Popup'
@@ -14,136 +15,121 @@ import { SelectInputProvider } from './SelectInputProvider'
 import type { DataType } from './types'
 import { selectInputStyle } from './styles.css'
 
-type SelectInputProps<IsMulti extends undefined | boolean = false> = {
-  /**
-   * Input name
-   */
-  name?: string
-  /**
-   * Place holder when no value defined
-   */
-  placeholder?: string
-  /**
-   * When searchable, placeholder when no value is searched
-   */
-  placeholderSearch?: string
-  /**
-   * Label of the component
-   */
-  label?: string
-  /**
-   * Description text to give more information to the user
-   */
-  helper?: ReactNode
-  /**
-   * Selectable options
-   */
-  options: DataType
-  /**
-   * Message to show when no option available
-   */
-  emptyState?: ReactNode
-  /**
-   * Whether the component in disabled
-   */
-  disabled?: boolean
-  /**
-   * Whether the component in readOnly
-   */
-  readOnly?: boolean
-  /**
-   * Whether it is possible to clear the search input
-   */
-  clearable?: boolean
-  /**
-   * Size of the input
-   */
-  size?: 'small' | 'medium' | 'large'
-  /**
-   * Whether field is required
-   */
-  required?: boolean
-  /**
-   * More information regarding/description ofs the selectInput
-   */
-  labelDescription?: ReactNode
-  /**
-   * Whether option description is on the right of the option or under it
-   */
-  descriptionDirection?: 'row' | 'column'
-  /**
-   * Where to place the additional info prop
-   */
-  optionalInfoPlacement?: 'left' | 'right'
-  /**
-   * To add custom fixed elements at the bottom of the dropdown
-   */
-  footer?: ((closeDropdown: () => void) => ReactNode) | ReactNode
-  /**
-   * Display an error message under the select bar
-   */
-  error?: string | boolean
-  /**
-   * @deprecated This property is automatically enabled when options.length >= 6 or if addOption is enable.
-   * Otherwise, no search bar
-   */
-  searchable?: boolean
-  /**
-   * When searchable, set a combobox to dynamically add an option
-   */
-  addOption?: { text: string; onClick: (searchText: string) => void }
-  /**
-   * Display a success message under the select bar
-   */
-  success?: string
-  /**
-   * Load more button to implement lazy loading
-   */
-  loadMore?: ReactNode
-  /**
-   * When the options are loading, display a skeleton
-   */
-  isLoading?: boolean
-  /**
-   * Add a tooltip around the select bar
-   */
-  tooltip?: string
-  /**
-   * Adds an option to select every selectable options
-   */
-  selectAll?: { label: ReactNode; description?: string }
-  /**
-   * When options are group, define a option to select every selectable options of a group
-   */
-  selectAllGroup?: boolean
-  dropdownAlign?: ComponentProps<typeof Popup>['align']
-  autofocus?: boolean
-  /**
-   * Whether it is possible to select multiple options
-   */
-  multiselect?: IsMulti
-  /**
-   * Default value, must be one of the options
-   */
-  value?: IsMulti extends true ? string[] : string
-  onChange?: IsMulti extends true ? (value: string[]) => void : (value: string) => void
-  'data-testid'?: string
-  /**
-   * In some cases, when the space is limited, you will need to change the `portalTarget` of the dropdown for a higher parent element.
-   * If you don't know which element to target, you can use `document.body`.
-   */
-  portalTarget?: ComponentProps<typeof Popup>['portalTarget']
-  /**
-   * Allow to specify a callback called when option dropdown is open
-   * Please wrap that definition in useCallback
-   */
-  onOpen?: () => void
-  groupError?: Record<string, ReactNode>
-  groupEmptyState?: Record<string, ReactNode>
-} & Pick<
-  HTMLAttributes<HTMLDivElement>,
-  'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className' | 'style' | 'aria-describedby'
->
+type SelectInputProps<IsMulti extends undefined | boolean = false> = BaseFormComponentProps &
+  PartialLabelProps & {
+    /**
+     * Place holder when no value defined
+     */
+    placeholder?: string
+    /**
+     * When searchable, placeholder when no value is searched
+     */
+    placeholderSearch?: string
+    /**
+     * Description text to give more information to the user
+     */
+    helper?: ReactNode
+    /**
+     * Selectable options
+     */
+    options: DataType
+    /**
+     * Message to show when no option available
+     */
+    emptyState?: ReactNode
+    /**
+     * Whether the component in readOnly
+     */
+    readOnly?: boolean
+    /**
+     * Whether it is possible to clear the search input
+     */
+    clearable?: boolean
+    /**
+     * Size of the input
+     */
+    size?: 'small' | 'medium' | 'large'
+    /**
+     * More information regarding/description ofs the selectInput
+     */
+    labelDescription?: ReactNode
+    /**
+     * Whether option description is on the right of the option or under it
+     */
+    descriptionDirection?: 'row' | 'column'
+    /**
+     * Where to place the additional info prop
+     */
+    optionalInfoPlacement?: 'left' | 'right'
+    /**
+     * To add custom fixed elements at the bottom of the dropdown
+     */
+    footer?: ((closeDropdown: () => void) => ReactNode) | ReactNode
+    /**
+     * Display an error message under the select bar
+     */
+    error?: string | boolean
+    /**
+     * @deprecated This property is automatically enabled when options.length >= 6 or if addOption is enable.
+     * Otherwise, no search bar
+     */
+    searchable?: boolean
+    /**
+     * When searchable, set a combobox to dynamically add an option
+     */
+    addOption?: { text: string; onClick: (searchText: string) => void }
+    /**
+     * Display a success message under the select bar
+     */
+    success?: string
+    /**
+     * Load more button to implement lazy loading
+     */
+    loadMore?: ReactNode
+    /**
+     * When the options are loading, display a skeleton
+     */
+    isLoading?: boolean
+    /**
+     * Add a tooltip around the select bar
+     */
+    tooltip?: string
+    /**
+     * Adds an option to select every selectable options
+     */
+    selectAll?: { label: ReactNode; description?: string }
+    /**
+     * When options are group, define a option to select every selectable options of a group
+     */
+    selectAllGroup?: boolean
+    dropdownAlign?: ComponentProps<typeof Popup>['align']
+    autofocus?: boolean
+    /**
+     * Whether it is possible to select multiple options
+     */
+    multiselect?: IsMulti
+    /**
+     * Default value, must be one of the options
+     */
+    value?: IsMulti extends true ? string[] : string
+    onChange?: IsMulti extends true ? (value: string[]) => void : (value: string) => void
+    'data-testid'?: string
+    /**
+     * In some cases, when the space is limited, you will need to change the `portalTarget` of the dropdown for a higher parent element.
+     * If you don't know which element to target, you can use `document.body`.
+     */
+    portalTarget?: ComponentProps<typeof Popup>['portalTarget']
+    /**
+     * Allow to specify a callback called when option dropdown is open
+     * Please wrap that definition in useCallback
+     */
+    onOpen?: () => void
+    groupError?: Record<string, ReactNode>
+    groupEmptyState?: Record<string, ReactNode>
+  } & Pick<
+    HTMLAttributes<HTMLDivElement>,
+    'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className' | 'style' | 'aria-describedby'
+  >
 /**
  * SelectInput component is used to select one or many elements from a selection.
  */
diff --git a/packages/ui/src/components/TextArea/index.tsx b/packages/ui/src/components/TextArea/index.tsx
index b50b0bdaa9..58eea51bb8 100644
--- a/packages/ui/src/components/TextArea/index.tsx
+++ b/packages/ui/src/components/TextArea/index.tsx
@@ -6,6 +6,7 @@ import { assignInlineVars } from '@vanilla-extract/dynamic'
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef } from 'react'
 import type { CSSProperties, ReactNode, TextareaHTMLAttributes } from 'react'
 import { hasHelperText } from '../../helpers/hasHelperText'
+import type { BaseFormComponentProps, LabelProps } from '../../types'
 import { Button } from '../Button'
 import { SIZE_HEIGHT as buttonSizeHeight } from '../Button/constants'
 import { Label } from '../Label'
@@ -16,67 +17,54 @@ import { SuccessErrorIcon } from './Icon'
 import { Notice } from './Notice'
 import { paddingRightVar, textAreaStyle } from './styles.css'
 
-type LabelProps =
-  | {
-      label: string
-      'aria-label'?: never
-    }
-  | {
-      label?: never
-      'aria-label': string
-    }
-
-type TextAreaProps = {
-  id?: string
-  className?: string
-  tabIndex?: number
-  autoFocus?: boolean
-  value?: string
-  onChange: (newValue: string) => void
-  placeholder?: string
-  /**
-   * Override others properties : readyOnly, success, error.
-   */
-  disabled?: boolean
-  /**
-   * Override others properties : success, error.
-   * Ignored if following props are provided : disabled.
-   */
-  readOnly?: boolean
-  /**
-   * Override others properties : error, helper.
-   * Ignored if following props are provided : disabled, readyOnly.
-   */
-  success?: string
-  /**
-   * Override others properties : helper.
-   * Ignored if following props are provided : disabled, readyOnly, success.
-   */
-  error?: string
-  /**
-   * Ignored if following props are provided : readyOnly, success.
-   */
-  helper?: ReactNode
-  /**
-   * Number of rows to display. If 'auto', the textarea will grow with the content
-   */
-  rows?: number | 'auto'
-  /**
-   * Text area will grow with the content with a maximum number of rows.
-   */
-  maxRows?: number
-  minLength?: number
-  maxLength?: number
-  size?: 'small' | 'medium' | 'large'
-  tooltip?: string
-  required?: boolean
-  'data-testid'?: string
-  name?: string
-  clearable?: boolean
-  labelDescription?: ReactNode
-  style?: CSSProperties
-} & LabelProps &
-  Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onFocus' | 'onBlur' | 'onKeyDown' | 'aria-describedby'>
+type TextAreaProps = BaseFormComponentProps &
+  LabelProps & {
+    className?: string
+    tabIndex?: number
+    autoFocus?: boolean
+    value?: string
+    onChange: (newValue: string) => void
+    placeholder?: string
+    /**
+     * Override others properties : readyOnly, success, error.
+     */
+    disabled?: boolean
+    /**
+     * Override others properties : success, error.
+     * Ignored if following props are provided : disabled.
+     */
+    readOnly?: boolean
+    /**
+     * Override others properties : error, helper.
+     * Ignored if following props are provided : disabled, readyOnly.
+     */
+    success?: string
+    /**
+     * Override others properties : helper.
+     * Ignored if following props are provided : disabled, readyOnly, success.
+     */
+    error?: string
+    /**
+     * Ignored if following props are provided : readyOnly, success.
+     */
+    helper?: ReactNode
+    /**
+     * Number of rows to display. If 'auto', the textarea will grow with the content
+     */
+    rows?: number | 'auto'
+    /**
+     * Text area will grow with the content with a maximum number of rows.
+     */
+    maxRows?: number
+    minLength?: number
+    maxLength?: number
+    size?: 'small' | 'medium' | 'large'
+    tooltip?: string
+    'data-testid'?: string
+    clearable?: boolean
+    labelDescription?: ReactNode
+    style?: CSSProperties
+  } & Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onFocus' | 'onBlur' | 'onKeyDown' | 'aria-describedby'>
 
 const BORDERS_WIDTH = '2px'
 const AUTO_ROWS = 2
diff --git a/packages/ui/src/components/TimeInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TimeInput/__tests__/__snapshots__/index.test.tsx.snap
index 9d48a76634..fa25f916c5 100644
--- a/packages/ui/src/components/TimeInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/TimeInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`timeInput > renders can move with arrow keys - 12-hour format 1`] = `
       >
         <label
           class="styles_htmlFor__17td3g92 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_bodyStrong__m4c9own style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-          for="_r_2c_"
+          for="_r_28_"
         >
           label
         </label>
@@ -33,7 +33,7 @@ exports[`timeInput > renders can move with arrow keys - 12-hour format 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_2d_"
+              aria-describedby="_r_29_"
               aria-valuemax="12"
               aria-valuemin="1"
               aria-valuenow="12"
@@ -41,7 +41,7 @@ exports[`timeInput > renders can move with arrow keys - 12-hour format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="hours-input"
-              id="_r_2c_"
+              id="_r_28_"
               placeholder="00"
               role="spinbutton"
               value="12"
@@ -56,7 +56,7 @@ exports[`timeInput > renders can move with arrow keys - 12-hour format 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_2d_"
+              aria-describedby="_r_29_"
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="23"
@@ -64,7 +64,7 @@ exports[`timeInput > renders can move with arrow keys - 12-hour format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="minutes-input"
-              id="_r_2c_"
+              id="_r_28_"
               placeholder="00"
               role="spinbutton"
               value="23"
@@ -79,7 +79,7 @@ exports[`timeInput > renders can move with arrow keys - 12-hour format 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_2d_"
+              aria-describedby="_r_29_"
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="14"
@@ -87,14 +87,14 @@ exports[`timeInput > renders can move with arrow keys - 12-hour format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="seconds-input"
-              id="_r_2c_"
+              id="_r_28_"
               placeholder="00"
               role="spinbutton"
               value="14"
             />
           </div>
           <input
-            aria-describedby="_r_2d_"
+            aria-describedby="_r_29_"
             aria-valuemax="12"
             aria-valuemin="0"
             aria-valuenow="12"
@@ -103,7 +103,7 @@ exports[`timeInput > renders can move with arrow keys - 12-hour format 1`] = `
             class="styles__yl1788 styles_period_true__yl1789"
             data-size="large"
             data-testid="am-pm-input"
-            id="_r_2c_"
+            id="_r_28_"
             placeholder="AM"
             role="spinbutton"
             value="PM"
@@ -112,7 +112,7 @@ exports[`timeInput > renders can move with arrow keys - 12-hour format 1`] = `
       </div>
       <span
         class="style__m4c9ow0 style_prominence_weak__m4c9ow7 style_sentiment_neutral__m4c9owb style_variant_caption__m4c9owp style_undefined_compound_3__m4c9ow1d style_undefined_compound_67__m4c9ow35"
-        id="_r_2d_"
+        id="_r_29_"
         role="status"
       >
         helper
@@ -135,7 +135,7 @@ exports[`timeInput > renders can move with arrow keys - 24-hour format 1`] = `
       >
         <label
           class="styles_htmlFor__17td3g92 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_bodyStrong__m4c9own style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-          for="_r_2j_"
+          for="_r_2f_"
         >
           label
         </label>
@@ -155,7 +155,7 @@ exports[`timeInput > renders can move with arrow keys - 24-hour format 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_2k_"
+              aria-describedby="_r_2g_"
               aria-valuemax="23"
               aria-valuemin="0"
               aria-valuenow="23"
@@ -163,7 +163,7 @@ exports[`timeInput > renders can move with arrow keys - 24-hour format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="hours-input"
-              id="_r_2j_"
+              id="_r_2f_"
               placeholder="00"
               role="spinbutton"
               value="23"
@@ -178,7 +178,7 @@ exports[`timeInput > renders can move with arrow keys - 24-hour format 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_2k_"
+              aria-describedby="_r_2g_"
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="23"
@@ -186,7 +186,7 @@ exports[`timeInput > renders can move with arrow keys - 24-hour format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="minutes-input"
-              id="_r_2j_"
+              id="_r_2f_"
               placeholder="00"
               role="spinbutton"
               value="23"
@@ -201,7 +201,7 @@ exports[`timeInput > renders can move with arrow keys - 24-hour format 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_2k_"
+              aria-describedby="_r_2g_"
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="14"
@@ -209,7 +209,7 @@ exports[`timeInput > renders can move with arrow keys - 24-hour format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="seconds-input"
-              id="_r_2j_"
+              id="_r_2f_"
               placeholder="00"
               role="spinbutton"
               value="14"
@@ -243,7 +243,7 @@ exports[`timeInput > renders can move with arrow keys - 24-hour format 1`] = `
       </div>
       <span
         class="style__m4c9ow0 style_prominence_weak__m4c9ow7 style_sentiment_neutral__m4c9owb style_variant_caption__m4c9owp style_undefined_compound_3__m4c9ow1d style_undefined_compound_67__m4c9ow35"
-        id="_r_2k_"
+        id="_r_2g_"
         role="status"
       >
         helper
@@ -266,7 +266,7 @@ exports[`timeInput > renders correctly clearable 1`] = `
       >
         <label
           class="styles_htmlFor__17td3g92 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_bodyStrong__m4c9own style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-          for="_r_24_"
+          for="_r_20_"
         >
           label
         </label>
@@ -286,7 +286,7 @@ exports[`timeInput > renders correctly clearable 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_25_"
+              aria-describedby="_r_21_"
               aria-valuemax="12"
               aria-valuemin="1"
               aria-valuenow="12"
@@ -294,7 +294,7 @@ exports[`timeInput > renders correctly clearable 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="hours-input"
-              id="_r_24_"
+              id="_r_20_"
               placeholder="00"
               role="spinbutton"
               value="12"
@@ -309,7 +309,7 @@ exports[`timeInput > renders correctly clearable 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_25_"
+              aria-describedby="_r_21_"
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="0"
@@ -317,7 +317,7 @@ exports[`timeInput > renders correctly clearable 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="minutes-input"
-              id="_r_24_"
+              id="_r_20_"
               placeholder="00"
               role="spinbutton"
               value="00"
@@ -332,7 +332,7 @@ exports[`timeInput > renders correctly clearable 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_25_"
+              aria-describedby="_r_21_"
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="0"
@@ -340,14 +340,14 @@ exports[`timeInput > renders correctly clearable 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="seconds-input"
-              id="_r_24_"
+              id="_r_20_"
               placeholder="00"
               role="spinbutton"
               value="00"
             />
           </div>
           <input
-            aria-describedby="_r_25_"
+            aria-describedby="_r_21_"
             aria-valuemax="12"
             aria-valuemin="0"
             aria-valuenow="0"
@@ -356,7 +356,7 @@ exports[`timeInput > renders correctly clearable 1`] = `
             class="styles__yl1788 styles_period_true__yl1789"
             data-size="large"
             data-testid="am-pm-input"
-            id="_r_24_"
+            id="_r_20_"
             placeholder="AM"
             role="spinbutton"
             value="AM"
@@ -389,7 +389,7 @@ exports[`timeInput > renders correctly clearable 1`] = `
       </div>
       <span
         class="style__m4c9ow0 style_prominence_weak__m4c9ow7 style_sentiment_neutral__m4c9owb style_variant_caption__m4c9owp style_undefined_compound_3__m4c9ow1d style_undefined_compound_67__m4c9ow35"
-        id="_r_25_"
+        id="_r_21_"
         role="status"
       >
         helper
@@ -412,7 +412,7 @@ exports[`timeInput > renders correctly controlled - 12-hour format 1`] = `
       >
         <label
           class="styles_htmlFor__17td3g92 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_bodyStrong__m4c9own style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-          for="_r_1m_"
+          for="_r_1i_"
         >
           label
         </label>
@@ -432,7 +432,7 @@ exports[`timeInput > renders correctly controlled - 12-hour format 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_1n_"
+              aria-describedby="_r_1j_"
               aria-valuemax="12"
               aria-valuemin="1"
               aria-valuenow="12"
@@ -440,7 +440,7 @@ exports[`timeInput > renders correctly controlled - 12-hour format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="hours-input"
-              id="_r_1m_"
+              id="_r_1i_"
               placeholder="00"
               role="spinbutton"
               value="12"
@@ -455,7 +455,7 @@ exports[`timeInput > renders correctly controlled - 12-hour format 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_1n_"
+              aria-describedby="_r_1j_"
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="23"
@@ -463,7 +463,7 @@ exports[`timeInput > renders correctly controlled - 12-hour format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="minutes-input"
-              id="_r_1m_"
+              id="_r_1i_"
               placeholder="00"
               role="spinbutton"
               value="23"
@@ -478,7 +478,7 @@ exports[`timeInput > renders correctly controlled - 12-hour format 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_1n_"
+              aria-describedby="_r_1j_"
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="7"
@@ -486,14 +486,14 @@ exports[`timeInput > renders correctly controlled - 12-hour format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="seconds-input"
-              id="_r_1m_"
+              id="_r_1i_"
               placeholder="00"
               role="spinbutton"
               value="07"
             />
           </div>
           <input
-            aria-describedby="_r_1n_"
+            aria-describedby="_r_1j_"
             aria-valuemax="12"
             aria-valuemin="0"
             aria-valuenow="0"
@@ -502,7 +502,7 @@ exports[`timeInput > renders correctly controlled - 12-hour format 1`] = `
             class="styles__yl1788 styles_period_true__yl1789"
             data-size="large"
             data-testid="am-pm-input"
-            id="_r_1m_"
+            id="_r_1i_"
             placeholder="AM"
             role="spinbutton"
             value="AM"
@@ -511,7 +511,7 @@ exports[`timeInput > renders correctly controlled - 12-hour format 1`] = `
       </div>
       <span
         class="style__m4c9ow0 style_prominence_weak__m4c9ow7 style_sentiment_neutral__m4c9owb style_variant_caption__m4c9owp style_undefined_compound_3__m4c9ow1d style_undefined_compound_67__m4c9ow35"
-        id="_r_1n_"
+        id="_r_1j_"
         role="status"
       >
         helper
@@ -534,7 +534,7 @@ exports[`timeInput > renders correctly controlled - 24-hours format 1`] = `
       >
         <label
           class="styles_htmlFor__17td3g92 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_bodyStrong__m4c9own style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-          for="_r_1t_"
+          for="_r_1p_"
         >
           label
         </label>
@@ -554,7 +554,7 @@ exports[`timeInput > renders correctly controlled - 24-hours format 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_1u_"
+              aria-describedby="_r_1q_"
               aria-valuemax="23"
               aria-valuemin="0"
               aria-valuenow="23"
@@ -562,7 +562,7 @@ exports[`timeInput > renders correctly controlled - 24-hours format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="hours-input"
-              id="_r_1t_"
+              id="_r_1p_"
               placeholder="00"
               role="spinbutton"
               value="23"
@@ -577,7 +577,7 @@ exports[`timeInput > renders correctly controlled - 24-hours format 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_1u_"
+              aria-describedby="_r_1q_"
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="32"
@@ -585,7 +585,7 @@ exports[`timeInput > renders correctly controlled - 24-hours format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="minutes-input"
-              id="_r_1t_"
+              id="_r_1p_"
               placeholder="00"
               role="spinbutton"
               value="32"
@@ -600,7 +600,7 @@ exports[`timeInput > renders correctly controlled - 24-hours format 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_1u_"
+              aria-describedby="_r_1q_"
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="31"
@@ -608,7 +608,7 @@ exports[`timeInput > renders correctly controlled - 24-hours format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="seconds-input"
-              id="_r_1t_"
+              id="_r_1p_"
               placeholder="00"
               role="spinbutton"
               value="31"
@@ -618,7 +618,7 @@ exports[`timeInput > renders correctly controlled - 24-hours format 1`] = `
       </div>
       <span
         class="style__m4c9ow0 style_prominence_weak__m4c9ow7 style_sentiment_neutral__m4c9owb style_variant_caption__m4c9owp style_undefined_compound_3__m4c9ow1d style_undefined_compound_67__m4c9ow35"
-        id="_r_1u_"
+        id="_r_1q_"
         role="status"
       >
         helper
@@ -638,7 +638,7 @@ exports[`timeInput > renders correctly disabled 1`] = `
     >
       <label
         class="styles_htmlFor__17td3g92 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_bodyStrong__m4c9own style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-        for="_r_4_"
+        for="_r_0_"
       >
         test
       </label>
@@ -659,7 +659,7 @@ exports[`timeInput > renders correctly disabled 1`] = `
               data-size="large"
               data-testid="hours-input"
               disabled=""
-              id="_r_4_"
+              id="_r_0_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -681,7 +681,7 @@ exports[`timeInput > renders correctly disabled 1`] = `
               data-size="large"
               data-testid="minutes-input"
               disabled=""
-              id="_r_4_"
+              id="_r_0_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -703,7 +703,7 @@ exports[`timeInput > renders correctly disabled 1`] = `
               data-size="large"
               data-testid="seconds-input"
               disabled=""
-              id="_r_4_"
+              id="_r_0_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -726,7 +726,7 @@ exports[`timeInput > renders correctly large 1`] = `
     >
       <label
         class="styles_htmlFor__17td3g92 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_bodyStrong__m4c9own style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-        for="_r_v_"
+        for="_r_r_"
       >
         test
       </label>
@@ -746,7 +746,7 @@ exports[`timeInput > renders correctly large 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="hours-input"
-              id="_r_v_"
+              id="_r_r_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -767,7 +767,7 @@ exports[`timeInput > renders correctly large 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="minutes-input"
-              id="_r_v_"
+              id="_r_r_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -788,7 +788,7 @@ exports[`timeInput > renders correctly large 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="seconds-input"
-              id="_r_v_"
+              id="_r_r_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -811,7 +811,7 @@ exports[`timeInput > renders correctly readOnly 1`] = `
     >
       <label
         class="styles_htmlFor__17td3g92 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_bodyStrong__m4c9own style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-        for="_r_9_"
+        for="_r_5_"
       >
         test
       </label>
@@ -831,7 +831,7 @@ exports[`timeInput > renders correctly readOnly 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="hours-input"
-              id="_r_9_"
+              id="_r_5_"
               placeholder="00"
               readonly=""
               role="spinbutton"
@@ -853,7 +853,7 @@ exports[`timeInput > renders correctly readOnly 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="minutes-input"
-              id="_r_9_"
+              id="_r_5_"
               placeholder="00"
               readonly=""
               role="spinbutton"
@@ -875,7 +875,7 @@ exports[`timeInput > renders correctly readOnly 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="seconds-input"
-              id="_r_9_"
+              id="_r_5_"
               placeholder="00"
               readonly=""
               role="spinbutton"
@@ -902,7 +902,7 @@ exports[`timeInput > renders correctly required 1`] = `
       >
         <label
           class="styles_htmlFor__17td3g92 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_bodyStrong__m4c9own style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-          for="_r_k_"
+          for="_r_g_"
         >
           test
         </label>
@@ -929,7 +929,7 @@ exports[`timeInput > renders correctly required 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="hours-input"
-              id="_r_k_"
+              id="_r_g_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -950,7 +950,7 @@ exports[`timeInput > renders correctly required 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="minutes-input"
-              id="_r_k_"
+              id="_r_g_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -971,7 +971,7 @@ exports[`timeInput > renders correctly required 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="seconds-input"
-              id="_r_k_"
+              id="_r_g_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -994,7 +994,7 @@ exports[`timeInput > renders correctly small 1`] = `
     >
       <label
         class="styles_htmlFor__17td3g92 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_bodySmallStrong__m4c9owl style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-        for="_r_q_"
+        for="_r_m_"
       >
         test
       </label>
@@ -1014,7 +1014,7 @@ exports[`timeInput > renders correctly small 1`] = `
               class="styles__yl1788"
               data-size="small"
               data-testid="hours-input"
-              id="_r_q_"
+              id="_r_m_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1035,7 +1035,7 @@ exports[`timeInput > renders correctly small 1`] = `
               class="styles__yl1788"
               data-size="small"
               data-testid="minutes-input"
-              id="_r_q_"
+              id="_r_m_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1056,7 +1056,7 @@ exports[`timeInput > renders correctly small 1`] = `
               class="styles__yl1788"
               data-size="small"
               data-testid="seconds-input"
-              id="_r_q_"
+              id="_r_m_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1079,7 +1079,7 @@ exports[`timeInput > renders correctly with 12-hour format 1`] = `
     >
       <label
         class="styles_htmlFor__17td3g92 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_bodyStrong__m4c9own style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-        for="_r_14_"
+        for="_r_10_"
       >
         test
       </label>
@@ -1099,7 +1099,7 @@ exports[`timeInput > renders correctly with 12-hour format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="hours-input"
-              id="_r_14_"
+              id="_r_10_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1120,7 +1120,7 @@ exports[`timeInput > renders correctly with 12-hour format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="minutes-input"
-              id="_r_14_"
+              id="_r_10_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1141,7 +1141,7 @@ exports[`timeInput > renders correctly with 12-hour format 1`] = `
               class="styles__yl1788"
               data-size="large"
               data-testid="seconds-input"
-              id="_r_14_"
+              id="_r_10_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1155,7 +1155,7 @@ exports[`timeInput > renders correctly with 12-hour format 1`] = `
             class="styles__yl1788 styles_period_true__yl1789"
             data-size="large"
             data-testid="am-pm-input"
-            id="_r_14_"
+            id="_r_10_"
             placeholder="AM"
             role="spinbutton"
           />
@@ -1166,85 +1166,6 @@ exports[`timeInput > renders correctly with 12-hour format 1`] = `
 </DocumentFragment>
 `;
 
-exports[`timeInput > renders correctly with base props 1`] = `
-<DocumentFragment>
-  <div
-    data-testid="testing"
-  >
-    <div
-      class="styles__toi52u0 styles_flexDirection_column_xxsmall__toi52u2d styles_gap_0.25rem_xxsmall__toi52u5j"
-    >
-      <div
-        class="styles__yl1780 styles_disabled_false__yl1781 styles_size_large__yl1785 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_justifyContent_space-between_xxsmall__toi52u77"
-      >
-        <div
-          class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
-        >
-          <div
-            class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
-          >
-            <input
-              aria-valuemax="23"
-              aria-valuemin="0"
-              autocomplete="off"
-              class="styles__yl1788"
-              data-size="large"
-              data-testid="hours-input"
-              id="_r_0_"
-              placeholder="00"
-              role="spinbutton"
-              value=""
-            />
-            <span
-              class="styles__yl178a style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_body__m4c9owj style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-            >
-              :
-            </span>
-          </div>
-          <div
-            class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
-          >
-            <input
-              aria-valuemax="59"
-              aria-valuemin="0"
-              autocomplete="off"
-              class="styles__yl1788"
-              data-size="large"
-              data-testid="minutes-input"
-              id="_r_0_"
-              placeholder="00"
-              role="spinbutton"
-              value=""
-            />
-            <span
-              class="styles__yl178a style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_body__m4c9owj style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-            >
-              :
-            </span>
-          </div>
-          <div
-            class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
-          >
-            <input
-              aria-valuemax="59"
-              aria-valuemin="0"
-              autocomplete="off"
-              class="styles__yl1788"
-              data-size="large"
-              data-testid="seconds-input"
-              id="_r_0_"
-              placeholder="00"
-              role="spinbutton"
-              value=""
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
 exports[`timeInput > renders correctly with error 1`] = `
 <DocumentFragment>
   <div
@@ -1255,7 +1176,7 @@ exports[`timeInput > renders correctly with error 1`] = `
     >
       <label
         class="styles_htmlFor__17td3g92 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_bodyStrong__m4c9own style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-        for="_r_e_"
+        for="_r_a_"
       >
         test
       </label>
@@ -1269,14 +1190,14 @@ exports[`timeInput > renders correctly with error 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_f_"
+              aria-describedby="_r_b_"
               aria-valuemax="23"
               aria-valuemin="0"
               autocomplete="off"
               class="styles__yl1788"
               data-size="large"
               data-testid="hours-input"
-              id="_r_e_"
+              id="_r_a_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1291,14 +1212,14 @@ exports[`timeInput > renders correctly with error 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_f_"
+              aria-describedby="_r_b_"
               aria-valuemax="59"
               aria-valuemin="0"
               autocomplete="off"
               class="styles__yl1788"
               data-size="large"
               data-testid="minutes-input"
-              id="_r_e_"
+              id="_r_a_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1313,14 +1234,14 @@ exports[`timeInput > renders correctly with error 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_f_"
+              aria-describedby="_r_b_"
               aria-valuemax="59"
               aria-valuemin="0"
               autocomplete="off"
               class="styles__yl1788"
               data-size="large"
               data-testid="seconds-input"
-              id="_r_e_"
+              id="_r_a_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1349,7 +1270,7 @@ exports[`timeInput > renders correctly with error 1`] = `
       </div>
       <span
         class="style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_danger__m4c9ow9 style_variant_caption__m4c9owp style_undefined_compound_0__m4c9ow1a style_undefined_compound_48__m4c9ow2m"
-        id="_r_f_"
+        id="_r_b_"
         role="status"
       >
         error
@@ -1372,7 +1293,7 @@ exports[`timeInput > renders correctly with helper and error 1`] = `
       >
         <label
           class="styles_htmlFor__17td3g92 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_bodyStrong__m4c9own style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-          for="_r_1f_"
+          for="_r_1b_"
         >
           label
         </label>
@@ -1392,14 +1313,14 @@ exports[`timeInput > renders correctly with helper and error 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_1g_"
+              aria-describedby="_r_1c_"
               aria-valuemax="23"
               aria-valuemin="0"
               autocomplete="off"
               class="styles__yl1788"
               data-size="large"
               data-testid="hours-input"
-              id="_r_1f_"
+              id="_r_1b_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1414,14 +1335,14 @@ exports[`timeInput > renders correctly with helper and error 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_1g_"
+              aria-describedby="_r_1c_"
               aria-valuemax="59"
               aria-valuemin="0"
               autocomplete="off"
               class="styles__yl1788"
               data-size="large"
               data-testid="minutes-input"
-              id="_r_1f_"
+              id="_r_1b_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1436,14 +1357,14 @@ exports[`timeInput > renders correctly with helper and error 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_1g_"
+              aria-describedby="_r_1c_"
               aria-valuemax="59"
               aria-valuemin="0"
               autocomplete="off"
               class="styles__yl1788"
               data-size="large"
               data-testid="seconds-input"
-              id="_r_1f_"
+              id="_r_1b_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1472,7 +1393,7 @@ exports[`timeInput > renders correctly with helper and error 1`] = `
       </div>
       <span
         class="style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_danger__m4c9ow9 style_variant_caption__m4c9owp style_undefined_compound_0__m4c9ow1a style_undefined_compound_48__m4c9ow2m"
-        id="_r_1g_"
+        id="_r_1c_"
         role="status"
       >
         helper
@@ -1495,7 +1416,7 @@ exports[`timeInput > renders correctly with label description and helper 1`] = `
       >
         <label
           class="styles_htmlFor__17td3g92 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_bodyStrong__m4c9own style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
-          for="_r_19_"
+          for="_r_15_"
         >
           label
         </label>
@@ -1513,14 +1434,14 @@ exports[`timeInput > renders correctly with label description and helper 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_1a_"
+              aria-describedby="_r_16_"
               aria-valuemax="23"
               aria-valuemin="0"
               autocomplete="off"
               class="styles__yl1788"
               data-size="large"
               data-testid="hours-input"
-              id="_r_19_"
+              id="_r_15_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1535,14 +1456,14 @@ exports[`timeInput > renders correctly with label description and helper 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_1a_"
+              aria-describedby="_r_16_"
               aria-valuemax="59"
               aria-valuemin="0"
               autocomplete="off"
               class="styles__yl1788"
               data-size="large"
               data-testid="minutes-input"
-              id="_r_19_"
+              id="_r_15_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1557,14 +1478,14 @@ exports[`timeInput > renders correctly with label description and helper 1`] = `
             class="styles__toi52u0 styles_flexDirection_row_xxsmall__toi52u2j"
           >
             <input
-              aria-describedby="_r_1a_"
+              aria-describedby="_r_16_"
               aria-valuemax="59"
               aria-valuemin="0"
               autocomplete="off"
               class="styles__yl1788"
               data-size="large"
               data-testid="seconds-input"
-              id="_r_19_"
+              id="_r_15_"
               placeholder="00"
               role="spinbutton"
               value=""
@@ -1574,7 +1495,7 @@ exports[`timeInput > renders correctly with label description and helper 1`] = `
       </div>
       <span
         class="style__m4c9ow0 style_prominence_weak__m4c9ow7 style_sentiment_neutral__m4c9owb style_variant_caption__m4c9owp style_undefined_compound_3__m4c9ow1d style_undefined_compound_67__m4c9ow35"
-        id="_r_1a_"
+        id="_r_16_"
         role="status"
       >
         helper
diff --git a/packages/ui/src/components/TimeInput/index.tsx b/packages/ui/src/components/TimeInput/index.tsx
index 248197e436..4148edaccd 100644
--- a/packages/ui/src/components/TimeInput/index.tsx
+++ b/packages/ui/src/components/TimeInput/index.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useId, useMemo, useRef, useState } from 'react'
 import type { CSSProperties, FocusEvent, ReactNode } from 'react'
 import { hasHelperText } from '../../helpers/hasHelperText'
+import type { BaseFormComponentProps } from '../../types'
 import { Description } from '../Description'
 import { Label } from '../Label'
 import { Stack } from '../Stack'
@@ -28,14 +29,12 @@ export type Time = {
   period?: string
 }
 
-type TimeInputProps = {
+type TimeInputProps = BaseFormComponentProps & {
   placeholder?: Time
   value?: Date | null
   clearable?: boolean
-  required?: boolean
   labelDescription?: ReactNode
   helper?: ReactNode
-  disabled?: boolean
   readOnly?: boolean
   error?: boolean | string
   'data-testid'?: string
@@ -43,7 +42,6 @@ type TimeInputProps = {
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void
   onFocus?: (event: FocusEvent<HTMLInputElement>) => void
   className?: string
-  id?: string
   size?: 'small' | 'medium' | 'large'
   timeFormat?: 12 | 24
   /**
@@ -52,16 +50,7 @@ type TimeInputProps = {
   autoFocus?: boolean
   style?: CSSProperties
   'aria-describedby'?: string
-} & (
-  | {
-      label?: string
-      'aria-label'?: never
-    }
-  | {
-      label?: never
-      'aria-label': string
-    }
-)
+}
 
 /**
  * A time input component that allows users to type a time in a 24 or 12-hour format.
diff --git a/packages/ui/src/components/UnitInput/index.tsx b/packages/ui/src/components/UnitInput/index.tsx
index 09b15bdc4a..e9d6b7aa60 100644
--- a/packages/ui/src/components/UnitInput/index.tsx
+++ b/packages/ui/src/components/UnitInput/index.tsx
@@ -7,6 +7,7 @@ import { assignInlineVars } from '@vanilla-extract/dynamic'
 import { useEffect, useId, useMemo, useState } from 'react'
 import type { ComponentProps, CSSProperties, InputHTMLAttributes, ReactNode } from 'react'
 import { hasHelperText } from '../../helpers/hasHelperText'
+import type { BaseFormComponentProps } from '../../types'
 import { Description } from '../Description'
 import { Label } from '../Label'
 import { Row } from '../Row'
@@ -17,7 +18,7 @@ import { unitInputStyle, widthSelectInput } from './styles.css'
 
 type UnitInputValue = { inputValue: number; unit: string }
 
-type UnitInputProps = {
+type UnitInputProps = BaseFormComponentProps & {
   className?: string
   max?: number
   min?: number
@@ -36,26 +37,22 @@ type UnitInputProps = {
   placeholderUnit?: string
   error?: boolean | string
   success?: boolean | string
-  label?: string
   labelInformation?: ReactNode
   step?: number | string
   dropdownAlign?: ComponentProps<typeof SelectInput>['dropdownAlign']
   templateColumns?: ComponentProps<typeof Row>['templateColumns']
 } & Pick<
-  InputHTMLAttributes<HTMLInputElement>,
-  | 'onFocus'
-  | 'onBlur'
-  | 'name'
-  | 'id'
-  | 'placeholder'
-  | 'disabled'
-  | 'readOnly'
-  | 'required'
-  | 'autoFocus'
-  | 'onKeyDown'
-  | 'style'
-  | 'aria-describedby'
->
+    InputHTMLAttributes<HTMLInputElement>,
+    | 'onFocus'
+    | 'onBlur'
+    | 'placeholder'
+    | 'disabled'
+    | 'readOnly'
+    | 'autoFocus'
+    | 'onKeyDown'
+    | 'style'
+    | 'aria-describedby'
+  >
 
 export const UnitInput = ({
   id,
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index b2e4730e59..234405b9c7 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -65,3 +65,5 @@ export {
   zoomOut,
   zoomOutDefault,
 } from './utils'
+
+export type { BaseFormComponentProps, LabelProps } from './types'
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index 104ceb14fb..4968ad8c2c 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -9,6 +9,14 @@ export type XOR<T extends unknown[]> = T extends [infer Only]
     ? XOR<[SingleXOR<A, B>, ...Rest]>
     : never
 
+/**
+ * Enforces that at least one of the given keys is provided.
+ * Useful for accessible labelling patterns like `label | aria-label | aria-labelledby`.
+ */
+export type AtLeastOne<T extends Record<string, unknown>> = {
+  [K in keyof T]: { [P in K]: T[P] } & { [P in Exclude<keyof T, K>]?: T[P] }
+}[keyof T]
+
 export type PascalToCamelCase<S extends string> = S extends `${infer P1}${infer P2}` ? `${Lowercase<P1>}${P2}` : S
 
 export type RemoveSuffix<S extends string, Suffix extends string> = S extends `${infer Prefix}${Suffix}` ? Prefix : S
@@ -25,8 +33,7 @@ export type PascalToCamelCaseWithoutSuffix<
   : never
 
 /**
- * Classic prop type where label is a ReactNode and aria-label is a string.
- * One or another is required.
+ * @deprecated use type FormComponentProps instead which will handle all form props required.
  */
 export type LabelProp =
   | {
@@ -44,3 +51,32 @@ export type LabelProp =
       'aria-label'?: never
       id: string
     }
+
+export type CheckboxLabelProp =
+  | {
+      children: ReactNode
+      'aria-label'?: string
+    }
+  | {
+      children?: never
+      'aria-label': string
+    }
+
+export type PartialLabelProps = Partial<{
+  label: string
+  'aria-label': string
+  'aria-labelledby': string
+}>
+
+export type LabelProps = AtLeastOne<{
+  label: string
+  'aria-label': string
+  'aria-labelledby': string
+}>
+
+export type BaseFormComponentProps = {
+  disabled?: boolean
+  required?: boolean
+  id?: string
+  name?: string
+} & PartialLabelProps