diff --git a/packages/smarthr-ui/src/components/Calendar/Calendar.tsx b/packages/smarthr-ui/src/components/Calendar/Calendar.tsx
index da1cc843cf..e903b3e28f 100644
--- a/packages/smarthr-ui/src/components/Calendar/Calendar.tsx
+++ b/packages/smarthr-ui/src/components/Calendar/Calendar.tsx
@@ -1,8 +1,15 @@
 import dayjs from 'dayjs'
-import React, { ComponentProps, MouseEvent, forwardRef, useEffect, useMemo, useState } from 'react'
+import React, {
+  ComponentProps,
+  MouseEvent,
+  forwardRef,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+} from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { Button } from '../Button'
 import { FaCaretDownIcon, FaCaretUpIcon, FaChevronLeftIcon, FaChevronRightIcon } from '../Icon'
 import { Cluster } from '../Layout'
diff --git a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
index 46cff310d2..9a73f4ed0b 100644
--- a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
+++ b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
@@ -5,13 +5,13 @@ import React, {
   forwardRef,
   useCallback,
   useEffect,
+  useId,
   useImperativeHandle,
   useMemo,
   useRef,
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { FaCheckIcon, FaMinusIcon } from '../Icon'
 
 export type Props = PropsWithChildren<
@@ -119,7 +119,8 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
       }
     }, [checked, mixed])
 
-    const checkBoxId = useId(props.id)
+    const defaultId = useId()
+    const checkBoxId = props.id || defaultId
 
     return (
       <span className={wrapperStyle}>
diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox.tsx
index 92aaf247b2..ca730e2820 100644
--- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox.tsx
@@ -9,10 +9,10 @@ import React, {
   useRef,
   useState,
 } from 'react'
+import { useId } from 'react'
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { useOuterClick } from '../../hooks/useOuterClick'
 import { useTheme } from '../../hooks/useTailwindTheme'
 import { genericsForwardRef } from '../../libs/util'
diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index ae8185dd27..78f74073cd 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -4,6 +4,7 @@ import React, {
   RefObject,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -11,7 +12,6 @@ import React, {
 import { tv } from 'tailwind-variants'
 
 import { useEnhancedEffect } from '../../hooks/useEnhancedEffect'
-import { useId } from '../../hooks/useId'
 import { usePortal } from '../../hooks/usePortal'
 import { useTheme } from '../../hooks/useTailwindTheme'
 import { FaInfoCircleIcon } from '../Icon'
diff --git a/packages/smarthr-ui/src/components/ComboBox/useOptions.ts b/packages/smarthr-ui/src/components/ComboBox/useOptions.ts
index c0058c34e5..c0604749d1 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useOptions.ts
+++ b/packages/smarthr-ui/src/components/ComboBox/useOptions.ts
@@ -1,8 +1,6 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useId, useMemo } from 'react'
 import innerText from 'react-innertext'
 
-import { useId } from '../../hooks/useId'
-
 import { convertMatchableString } from './comboBoxHelper'
 import { ComboBoxItem, ComboBoxOption } from './types'
 
diff --git a/packages/smarthr-ui/src/components/DatePicker/DatePicker.tsx b/packages/smarthr-ui/src/components/DatePicker/DatePicker.tsx
index 29eaccbc35..82eeb52531 100644
--- a/packages/smarthr-ui/src/components/DatePicker/DatePicker.tsx
+++ b/packages/smarthr-ui/src/components/DatePicker/DatePicker.tsx
@@ -5,6 +5,7 @@ import React, {
   forwardRef,
   useCallback,
   useEffect,
+  useId,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -12,7 +13,6 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { useOuterClick } from '../../hooks/useOuterClick'
 import { useTheme } from '../../hooks/useTailwindTheme'
 import { Calendar } from '../Calendar'
diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialog.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialog.tsx
index fd07f26f3d..50f7b06e7d 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialog.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialog.tsx
@@ -1,6 +1,5 @@
-import React, { ComponentProps, useCallback } from 'react'
+import React, { ComponentProps, useCallback, useId } from 'react'
 
-import { useId } from '../../../hooks/useId'
 import { DialogContentInner } from '../DialogContentInner'
 import { DialogProps } from '../types'
 import { useDialogPortal } from '../useDialogPortal'
diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContent.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContent.tsx
index c91438d8a2..72d1f28d91 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContent.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContent.tsx
@@ -1,6 +1,5 @@
-import React, { HTMLAttributes, useCallback, useContext } from 'react'
+import React, { HTMLAttributes, useCallback, useContext, useId } from 'react'
 
-import { useId } from '../../../hooks/useId'
 import { DialogContentInner } from '../DialogContentInner'
 import { DialogContext } from '../DialogWrapper'
 import { UncontrolledDialogProps } from '../types'
diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx
index bb574ad8e7..840ac93cb3 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx
@@ -1,6 +1,5 @@
-import React, { ReactElement, cloneElement, useCallback, useMemo, useState } from 'react'
+import React, { ReactElement, cloneElement, useCallback, useId, useMemo, useState } from 'react'
 
-import { useId } from '../../../hooks/useId'
 import { ActionDialog } from '../ActionDialog'
 
 type ToggleModalActionType = () => void
diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx
index c8ce99ebe6..40a2c8eccb 100644
--- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx
@@ -1,6 +1,5 @@
-import React, { ComponentProps, FormEvent, useCallback } from 'react'
+import React, { ComponentProps, FormEvent, useCallback, useId } from 'react'
 
-import { useId } from '../../../hooks/useId'
 import { DialogContentInner } from '../DialogContentInner'
 import { DialogProps } from '../types'
 import { useDialogPortal } from '../useDialogPortal'
diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContent.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContent.tsx
index a6c6bd4efa..247bc13b94 100644
--- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContent.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContent.tsx
@@ -1,6 +1,5 @@
-import React, { FormEvent, HTMLAttributes, useCallback, useContext } from 'react'
+import React, { FormEvent, HTMLAttributes, useCallback, useContext, useId } from 'react'
 
-import { useId } from '../../../hooks/useId'
 import { DialogContentInner } from '../DialogContentInner'
 import { DialogContext } from '../DialogWrapper'
 import { UncontrolledDialogProps } from '../types'
diff --git a/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialog.tsx b/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialog.tsx
index 6150f47cae..e2fcc01297 100644
--- a/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialog.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialog.tsx
@@ -1,6 +1,5 @@
-import React, { ComponentProps, useCallback } from 'react'
+import React, { ComponentProps, useCallback, useId } from 'react'
 
-import { useId } from '../../../hooks/useId'
 import { DialogContentInner } from '../DialogContentInner'
 import { DialogProps } from '../types'
 import { useDialogPortal } from '../useDialogPortal'
diff --git a/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContent.tsx b/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContent.tsx
index 6db646a794..09695bdb91 100644
--- a/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContent.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContent.tsx
@@ -1,6 +1,5 @@
-import React, { ComponentProps, useCallback, useContext } from 'react'
+import React, { ComponentProps, useCallback, useContext, useId } from 'react'
 
-import { useId } from '../../../hooks/useId'
 import { DialogContentInner } from '../DialogContentInner'
 import { DialogContext } from '../DialogWrapper'
 import { UncontrolledDialogProps } from '../types'
diff --git a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
index 85b2ec66c0..d451d9eaae 100644
--- a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
@@ -7,6 +7,7 @@ import React, {
   RefObject,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -15,7 +16,6 @@ import Draggable from 'react-draggable'
 import { VariantProps, tv } from 'tailwind-variants'
 
 import { useHandleEscape } from '../../hooks/useHandleEscape'
-import { useId } from '../../hooks/useId'
 import { useTheme } from '../../hooks/useTailwindTheme'
 import { Base, BaseElementProps } from '../Base'
 import { Button } from '../Button'
diff --git a/packages/smarthr-ui/src/components/Dropdown/Dropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/Dropdown.tsx
index aab22964c0..ba1cbca659 100644
--- a/packages/smarthr-ui/src/components/Dropdown/Dropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/Dropdown.tsx
@@ -6,12 +6,12 @@ import React, {
   createContext,
   useContext,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
 } from 'react'
 
-import { useId } from '../../hooks/useId'
 import { usePortal } from '../../hooks/usePortal'
 
 import { Rect, getFirstTabbable, isEventFromChild } from './dropdownHelper'
diff --git a/packages/smarthr-ui/src/components/FormControl/FormControl.tsx b/packages/smarthr-ui/src/components/FormControl/FormControl.tsx
index 9ac3630b72..3e1e6a7332 100644
--- a/packages/smarthr-ui/src/components/FormControl/FormControl.tsx
+++ b/packages/smarthr-ui/src/components/FormControl/FormControl.tsx
@@ -8,10 +8,10 @@ import React, {
   useMemo,
   useRef,
 } from 'react'
+import { useId } from 'react'
 import { isStyledComponent } from 'styled-components'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { MultiComboBox, SingleComboBox } from '../ComboBox'
 import { DatePicker } from '../DatePicker'
 import { DropZone } from '../DropZone'
@@ -146,8 +146,10 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
   children,
   ...props
 }) => {
-  const managedHtmlFor = useId(htmlFor)
-  const managedLabelId = useId(labelId)
+  const defaultHtmlFor = useId()
+  const defaultLabelId = useId()
+  const managedHtmlFor = htmlFor || defaultHtmlFor
+  const managedLabelId = labelId || defaultLabelId
   const inputWrapperRef = useRef<HTMLDivElement>(null)
   const isRoleGroup = as === 'fieldset'
   const statusLabelList = Array.isArray(statusLabelProps) ? statusLabelProps : [statusLabelProps]
diff --git a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
index 1d3deafaf5..2365febd95 100644
--- a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
+++ b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
@@ -1,7 +1,14 @@
-import React, { FC, PropsWithChildren, useCallback, useEffect, useMemo, useState } from 'react'
+import React, {
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+} from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { Base, BaseElementProps } from '../Base'
 import { Button } from '../Button'
 import { Heading, HeadingTagTypes } from '../Heading'
diff --git a/packages/smarthr-ui/src/components/RadioButton/RadioButton.tsx b/packages/smarthr-ui/src/components/RadioButton/RadioButton.tsx
index e0e4a19956..9da0269ac9 100644
--- a/packages/smarthr-ui/src/components/RadioButton/RadioButton.tsx
+++ b/packages/smarthr-ui/src/components/RadioButton/RadioButton.tsx
@@ -4,11 +4,11 @@ import React, {
   PropsWithChildren,
   forwardRef,
   useCallback,
+  useId,
   useMemo,
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { isIOS } from '../../libs/ua'
 
 type Props = PropsWithChildren<ComponentPropsWithRef<'input'>>
@@ -72,7 +72,8 @@ export const RadioButton = forwardRef<HTMLInputElement, Props>(
       [onChange],
     )
 
-    const radioButtonId = useId(props.id)
+    const defaultId = useId()
+    const radioButtonId = defaultId || props.id
 
     return (
       <span className={wrapperStyle}>
diff --git a/packages/smarthr-ui/src/components/Switch/Switch.tsx b/packages/smarthr-ui/src/components/Switch/Switch.tsx
index 0943d4310f..dc4c43d8ec 100644
--- a/packages/smarthr-ui/src/components/Switch/Switch.tsx
+++ b/packages/smarthr-ui/src/components/Switch/Switch.tsx
@@ -1,7 +1,6 @@
-import React, { InputHTMLAttributes, ReactNode, forwardRef, useMemo } from 'react'
+import React, { InputHTMLAttributes, ReactNode, forwardRef, useId, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { FaCheckIcon } from '../Icon'
 import { Cluster } from '../Layout'
 import { Text } from '../Text'
@@ -56,7 +55,8 @@ export const Switch = forwardRef<HTMLInputElement, Props>(
   ({ children, dangerouslyLabelHidden, className, id, ...props }, ref) => {
     const { wrapper, input, icon, iconWrapper } = useMemo(() => switchStyle(), [])
     const ActualLabelComponent = dangerouslyLabelHidden ? VisuallyHiddenText : Text
-    const inputId = useId(id)
+    const defaultId = useId()
+    const inputId = id || defaultId
 
     return (
       <Cluster align="center">
diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index e6b5f06025..69229c7e4c 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -4,6 +4,7 @@ import React, {
   startTransition,
   useCallback,
   useEffect,
+  useId,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -11,7 +12,6 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { useTheme } from '../../hooks/useTailwindTheme'
 import { debounce } from '../../libs/debounce'
 import { defaultHtmlFontSize } from '../../themes/createFontSize'
diff --git a/packages/smarthr-ui/src/components/Tooltip/Tooltip.tsx b/packages/smarthr-ui/src/components/Tooltip/Tooltip.tsx
index 04f3028acf..66b2136998 100644
--- a/packages/smarthr-ui/src/components/Tooltip/Tooltip.tsx
+++ b/packages/smarthr-ui/src/components/Tooltip/Tooltip.tsx
@@ -5,6 +5,7 @@ import React, {
   ReactElement,
   ReactNode,
   useCallback,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -15,7 +16,6 @@ import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
 import { useEnhancedEffect } from '../../hooks/useEnhancedEffect'
-import { useId } from '../../hooks/useId'
 import { Props as BalloonProps } from '../Balloon'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
diff --git a/packages/smarthr-ui/src/hooks/useId.test.ts b/packages/smarthr-ui/src/hooks/useId.test.ts
deleted file mode 100644
index babe9dcb45..0000000000
--- a/packages/smarthr-ui/src/hooks/useId.test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { renderHook } from '@testing-library/react'
-
-import { useId } from './useId'
-
-describe('useId', () => {
-  it('defaultId を指定した場合、毎回同じ値を返す', () => {
-    const { result: id1 } = renderHook(() => useId('test'))
-    const { result: id2 } = renderHook(() => useId('test'))
-    const { result: id3 } = renderHook(() => useId('test'))
-
-    expect(id1.current).toEqual('test')
-    expect(id2.current).toEqual('test')
-    expect(id3.current).toEqual('test')
-  })
-
-  it('defaultId を指定しない場合、異なる値を返す', () => {
-    const { result: id1 } = renderHook(() => useId())
-    const { result: id2 } = renderHook(() => useId())
-    const { result: id3 } = renderHook(() => useId())
-
-    expect(id1.current).not.toEqual(id2.current)
-    expect(id2.current).not.toEqual(id3.current)
-    expect(id3.current).not.toEqual(id1.current)
-  })
-})
diff --git a/packages/smarthr-ui/src/hooks/useId.tsx b/packages/smarthr-ui/src/hooks/useId.tsx
deleted file mode 100644
index bd5cb6d468..0000000000
--- a/packages/smarthr-ui/src/hooks/useId.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-
-export const useId = (defaultId?: string): string => {
-  const id = React.useId()
-  return defaultId || id
-}