diff --git a/packages/smarthr-ui/src/components/Browser/Browser.tsx b/packages/smarthr-ui/src/components/Browser/Browser.tsx
index 3f6596696e..b8828a8c64 100644
--- a/packages/smarthr-ui/src/components/Browser/Browser.tsx
+++ b/packages/smarthr-ui/src/components/Browser/Browser.tsx
@@ -1,7 +1,7 @@
 import React, { FC, KeyboardEventHandler, useCallback, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { DecoratorsType } from '../../types'
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { Text } from '../Text'
 
 import { BrowserColumn } from './BrowserColumn'
diff --git a/packages/smarthr-ui/src/components/Button/Button.tsx b/packages/smarthr-ui/src/components/Button/Button.tsx
index 921537ba43..27c1355683 100644
--- a/packages/smarthr-ui/src/components/Button/Button.tsx
+++ b/packages/smarthr-ui/src/components/Button/Button.tsx
@@ -3,8 +3,8 @@
 import React, { ButtonHTMLAttributes, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { usePortal } from '../../hooks/usePortal'
-import { DecoratorsType } from '../../types'
 import { Loader } from '../Loader'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
index e304b25962..2b70e06909 100644
--- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
@@ -15,6 +15,7 @@ import { useId } from 'react'
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { useOuterClick } from '../../../hooks/useOuterClick'
 import { genericsForwardRef } from '../../../libs/util'
 import { textColor } from '../../../themes'
@@ -26,7 +27,6 @@ import { useOptions } from '../useOptions'
 import { MultiSelectedItem } from './MultiSelectedItem'
 import { hasParentElementByClassName } from './multiComboBoxHelper'
 
-import type { DecoratorsType } from '../../../types'
 import type { BaseProps, ComboBoxItem } from '../types'
 
 type Props<T> = BaseProps<T> & {
diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
index 889f942a76..548b4f56cb 100644
--- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
@@ -17,6 +17,7 @@ import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
 import { useClick } from '../../../hooks/useClick'
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { genericsForwardRef } from '../../../libs/util'
 import { textColor } from '../../../themes'
 import { UnstyledButton } from '../../Button'
@@ -25,7 +26,6 @@ import { Input } from '../../Input'
 import { useListBox } from '../useListBox'
 import { useOptions } from '../useOptions'
 
-import type { DecoratorsType } from '../../../types'
 import type { BaseProps, ComboBoxItem } from '../types'
 
 type Props<T> = BaseProps<T> & {
diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index eca85e675b..bbe874e38c 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -11,6 +11,7 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { useEnhancedEffect } from '../../hooks/useEnhancedEffect'
 import { usePortal } from '../../hooks/usePortal'
 import { spacing } from '../../themes'
@@ -23,8 +24,6 @@ import { ComboBoxItem, ComboBoxOption } from './types'
 import { useActiveOption } from './useActiveOption'
 import { usePartialRendering } from './usePartialRendering'
 
-import type { DecoratorsType } from '../../types'
-
 type Props<T> = {
   options: Array<ComboBoxOption<T>>
   dropdownHelpMessage?: ReactNode
diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
index 4d83d9a9bf..4492d8cc7e 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
@@ -2,6 +2,7 @@
 
 import React, { type FC, type PropsWithChildren, type ReactNode, useCallback } from 'react'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { ResponseMessage } from '../../ResponseMessage'
@@ -9,7 +10,7 @@ import { DialogBody, type Props as DialogBodyProps } from '../DialogBody'
 import { DialogHeader, type Props as DialogHeaderProps } from '../DialogHeader'
 import { dialogContentInner } from '../dialogInnerStyle'
 
-import type { DecoratorsType, ResponseMessageType } from '../../../types'
+import type { ResponseMessageType } from '../../../types'
 
 export type BaseProps = PropsWithChildren<
   DialogHeaderProps &
diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx
index 026820f29c..e56fbe6623 100644
--- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx
@@ -7,6 +7,7 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { ResponseMessage } from '../../ResponseMessage'
@@ -15,7 +16,7 @@ import { DialogBody, Props as DialogBodyProps } from '../DialogBody'
 import { DialogHeader, type Props as DialogHeaderProps } from '../DialogHeader'
 import { dialogContentInner } from '../dialogInnerStyle'
 
-import type { DecoratorsType, ResponseMessageType } from '../../../types'
+import type { ResponseMessageType } from '../../../types'
 
 export type BaseProps = PropsWithChildren<
   DialogHeaderProps &
diff --git a/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx
index 4b99580ac0..e1e84c0fb0 100644
--- a/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx
@@ -1,13 +1,12 @@
 import React, { type FC } from 'react'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { DialogBody, Props as DialogBodyProps } from '../DialogBody'
 import { DialogHeader, Props as DialogHeaderProps } from '../DialogHeader'
 import { dialogContentInner } from '../dialogInnerStyle'
 
-import type { DecoratorsType } from '../../../types'
-
 export type BaseProps = DialogHeaderProps &
   DialogBodyProps & {
     /** ダイアログの説明 */
diff --git a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
index accdb8c481..a503ecead1 100644
--- a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
@@ -17,6 +17,7 @@ import React, {
 import Draggable from 'react-draggable'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { useHandleEscape } from '../../hooks/useHandleEscape'
 import { spacing } from '../../themes'
 import { Base, BaseElementProps } from '../Base'
@@ -27,8 +28,6 @@ import { DialogBody, type Props as DialogBodyProps } from './DialogBody'
 import { DialogOverlap } from './DialogOverlap'
 import { useDialogPortal } from './useDialogPortal'
 
-import type { DecoratorsType } from '../../types'
-
 type Props = PropsWithChildren<{
   /**
    * ダイアログのヘッダ部分の内容
diff --git a/packages/smarthr-ui/src/components/DropZone/DropZone.tsx b/packages/smarthr-ui/src/components/DropZone/DropZone.tsx
index ead14d1e92..46f2211fb5 100644
--- a/packages/smarthr-ui/src/components/DropZone/DropZone.tsx
+++ b/packages/smarthr-ui/src/components/DropZone/DropZone.tsx
@@ -14,11 +14,10 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { Button } from '../Button'
 import { FaFolderOpenIcon } from '../Icon'
 
-import type { DecoratorsType } from '../../types'
-
 const dropZone = tv({
   slots: {
     wrapper: [
diff --git a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
index 2f4bb4dad5..3cd7f724f5 100644
--- a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
@@ -4,6 +4,7 @@ import React, { ComponentProps, FC, ReactNode, useMemo } from 'react'
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorType, type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button, BaseProps as ButtonProps } from '../../Button'
 import { FaCircleCheckIcon, FaFilterIcon, FaRotateLeftIcon } from '../../Icon'
 import { Cluster, Stack } from '../../Layout'
@@ -13,7 +14,7 @@ import { DropdownCloser } from '../DropdownCloser'
 import { DropdownContent } from '../DropdownContent'
 import { DropdownTrigger } from '../DropdownTrigger'
 
-import type { DecoratorType, DecoratorsType, ResponseMessageType } from '../../../types'
+import type { ResponseMessageType } from '../../../types'
 
 type Props = {
   isFiltered?: boolean
diff --git a/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
index 56f4dfceb0..f5427ec3c2 100644
--- a/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
@@ -3,6 +3,7 @@
 import React, { ComponentPropsWithRef } from 'react'
 import { type FC, type MouseEventHandler } from 'react'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Fieldset } from '../../Fieldset'
 import { FormControl } from '../../FormControl'
@@ -16,8 +17,6 @@ import { DropdownTrigger } from '../DropdownTrigger'
 
 import { useSortDropdown } from './useSortDropdown'
 
-import type { DecoratorsType } from '../../../types'
-
 type SortFieldType = {
   value: string
 } & Omit<React.OptionHTMLAttributes<HTMLOptionElement>, 'value'>
diff --git a/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx b/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
index 12b702552b..c3f5c8433d 100644
--- a/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
+++ b/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, ReactNode, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown'
 import { Heading } from '../../Heading'
@@ -9,8 +10,6 @@ import { Cluster, Stack } from '../../Layout'
 import { Section } from '../../SectioningContent'
 import { TextLink } from '../../TextLink'
 
-import type { DecoratorsType } from '../../../types'
-
 type Category = {
   type?: string
   heading: ReactNode
diff --git a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
index 5a54ba387d..1ffa259ef3 100644
--- a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
+++ b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
@@ -3,12 +3,13 @@
 import React, { HTMLAttributes, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { tabbable } from '../../../libs/tabbable'
 import { Button } from '../../Button'
 import { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown'
 import { FaCaretDownIcon, FaCheckIcon, FaGlobeIcon, LanguageIcon } from '../../Icon'
 
-import type { DecoratorsType, LocaleMap } from '../../../types'
+import type { LocaleMap } from '../../../types'
 
 export type Props = {
   narrow?: boolean
diff --git a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
index df3708d612..2628c11239 100644
--- a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
+++ b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
@@ -11,6 +11,7 @@ import React, {
 } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { Base, BaseElementProps } from '../Base'
 import { Button } from '../Button'
 import { Heading, HeadingTagTypes } from '../Heading'
@@ -18,8 +19,6 @@ import { FaCaretDownIcon, FaCaretUpIcon } from '../Icon'
 import { Cluster } from '../Layout'
 import { ResponseMessage } from '../ResponseMessage'
 
-import type { DecoratorsType } from '../../types'
-
 type AbstractProps = PropsWithChildren<{
   /** パネルのタイトル */
   title: React.ReactNode
diff --git a/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx b/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx
index b680d91f76..fabcf131b1 100644
--- a/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx
+++ b/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx
@@ -1,11 +1,10 @@
 import React, { ComponentProps, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { FaMagnifyingGlassIcon } from '../../Icon'
 import { InputWithTooltip } from '../InputWithTooltip'
 
-import type { DecoratorsType } from '../../../types'
-
 type Props = Omit<ComponentProps<typeof InputWithTooltip>, 'tooltipMessage' | 'prefix'> & {
   /** 入力欄の説明を紐付けるツールチップに表示するメッセージ */
   tooltipMessage: React.ReactNode
diff --git a/packages/smarthr-ui/src/components/InputFile/InputFile.tsx b/packages/smarthr-ui/src/components/InputFile/InputFile.tsx
index fed78b2c04..44b5b5065d 100644
--- a/packages/smarthr-ui/src/components/InputFile/InputFile.tsx
+++ b/packages/smarthr-ui/src/components/InputFile/InputFile.tsx
@@ -12,13 +12,12 @@ import React, {
 } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { BaseColumn } from '../Base'
 import { Button } from '../Button'
 import { FaFolderOpenIcon, FaTrashCanIcon } from '../Icon'
 import { Stack } from '../Layout'
 
-import type { DecoratorsType } from '../../types'
-
 const inputFile = tv({
   slots: {
     wrapper: 'smarthr-ui-InputFile shr-block',
diff --git a/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx b/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx
index b49355ec5f..08155b824a 100644
--- a/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx
+++ b/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx
@@ -1,11 +1,10 @@
 import React, { ComponentPropsWithoutRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorType, type DecoratorsType } from '../../hooks/useDecorators'
 import { Cluster } from '../Layout'
 import { RangeSeparator, Text } from '../Text'
 
-import type { DecoratorType, DecoratorsType } from '../../types'
-
 type Props = {
   start: number
   end: number
diff --git a/packages/smarthr-ui/src/components/Select/Select.tsx b/packages/smarthr-ui/src/components/Select/Select.tsx
index e581883fef..78743469ab 100644
--- a/packages/smarthr-ui/src/components/Select/Select.tsx
+++ b/packages/smarthr-ui/src/components/Select/Select.tsx
@@ -9,12 +9,11 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorType, type DecoratorsType } from '../../hooks/useDecorators'
 import { isIOS, isMobileSafari } from '../../libs/ua'
 import { genericsForwardRef } from '../../libs/util'
 import { FaSortIcon } from '../Icon'
 
-import type { DecoratorType, DecoratorsType } from '../../types'
-
 type Option<T extends string> = {
   value: T
 } & Omit<React.OptionHTMLAttributes<HTMLOptionElement>, 'value'>
diff --git a/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx b/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx
index cc17c4fbdc..06e6da8539 100644
--- a/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx
+++ b/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx
@@ -1,13 +1,12 @@
 import React, { ComponentProps, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { Balloon } from '../Balloon'
 import { CheckBox, Props as CheckBoxProps } from '../CheckBox'
 
 import { Th } from './Th'
 
-import type { DecoratorsType } from '../../types'
-
 type Props = {
   decorators?: DecoratorsType<'checkAllInvisibleLabel'> & {
     checkColumnName?: (text: string) => string
diff --git a/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx b/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx
index 5356e5163c..bca1828f4c 100644
--- a/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx
+++ b/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx
@@ -1,9 +1,8 @@
 import React, { useMemo } from 'react'
 
+import { type DecoratorType, type DecoratorsType } from '../../hooks/useDecorators'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
-import type { DecoratorType, DecoratorsType } from '../../types'
-
 type Props = {
   decorators?: DecoratorsType<'text' | 'visuallyHiddenText'>
 }
diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index d1317aa5e0..16fbe82646 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -15,13 +15,12 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType, useDecorators } from '../../hooks/useDecorators'
 import { debounce } from '../../libs/debounce'
 import { lineHeight } from '../../themes'
 import { defaultHtmlFontSize } from '../../themes/createFontSize'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
-import type { DecoratorsType } from '../../types'
-
 type Props = {
   /** 入力値にエラーがあるかどうか */
   error?: boolean
@@ -38,13 +37,7 @@ type Props = {
   /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */
   maxLetters?: number
   /** コンポーネント内の文言を変更するための関数を設定 */
-  decorators?: DecoratorsType<
-    | 'beforeMaxLettersCount'
-    | 'afterMaxLettersCount'
-    | 'afterMaxLettersCountExceeded'
-    | 'beforeScreenReaderMaxLettersDescription'
-    | 'afterScreenReaderMaxLettersDescription'
-  >
+  decorators?: DecoratorsType<DecoratorKeyTypes>
   /**
    * @deprecated placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。
    */
@@ -65,12 +58,14 @@ const getStringLength = (value: string | number | readonly string[]) => {
   return formattedValue.length - (formattedValue.match(surrogatePairs) || []).length
 }
 
-const TEXT_BEFORE_MAXLETTERS_COUNT = 'あと'
-const TEXT_AFTER_MAXLETTERS_COUNT = '文字'
-const TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED = 'オーバー'
-
-const SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION = '最大'
-const SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION = '文字入力できます'
+const DECORATOR_DEFAULT_TEXTS = {
+  beforeMaxLettersCount: 'あと',
+  afterMaxLettersCount: '文字',
+  afterMaxLettersCountExceeded: 'オーバー',
+  beforeScreenReaderMaxLettersDescription: '最大',
+  afterScreenReaderMaxLettersDescription: '文字入力できます',
+} as const
+type DecoratorKeyTypes = keyof typeof DECORATOR_DEFAULT_TEXTS
 
 const textarea = tv({
   slots: {
@@ -126,34 +121,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0)
     const [srCounterMessage, setSrCounterMessage] = useState<ReactNode>('')
 
-    const {
-      afterMaxLettersCount,
-      beforeMaxLettersCount,
-      maxLettersCountExceeded,
-      beforeScreenReaderMaxLettersDescription,
-      afterScreenReaderMaxLettersDescription,
-    } = useMemo(
-      () => ({
-        beforeMaxLettersCount:
-          decorators?.beforeMaxLettersCount?.(TEXT_BEFORE_MAXLETTERS_COUNT) ||
-          TEXT_BEFORE_MAXLETTERS_COUNT,
-        afterMaxLettersCount:
-          decorators?.afterMaxLettersCount?.(TEXT_AFTER_MAXLETTERS_COUNT) ||
-          TEXT_AFTER_MAXLETTERS_COUNT,
-        maxLettersCountExceeded:
-          decorators?.afterMaxLettersCountExceeded?.(TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED) ||
-          TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED,
-        beforeScreenReaderMaxLettersDescription:
-          decorators?.beforeScreenReaderMaxLettersDescription?.(
-            SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION,
-          ) || SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION,
-        afterScreenReaderMaxLettersDescription:
-          decorators?.afterScreenReaderMaxLettersDescription?.(
-            SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION,
-          ) || SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION,
-      }),
-      [decorators],
-    )
+    const decorated = useDecorators<DecoratorKeyTypes>(DECORATOR_DEFAULT_TEXTS, decorators)
 
     const getCounterMessage = useCallback(
       (counterValue: number) => {
@@ -164,8 +132,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
           return (
             <>
               {counterValue - maxLetters}
-              {afterMaxLettersCount}
-              {maxLettersCountExceeded}
+              {decorated.afterMaxLettersCount}
+              {decorated.afterMaxLettersCountExceeded}
             </>
           )
         }
@@ -173,13 +141,18 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
         // あと{count}文字
         return (
           <>
-            {beforeMaxLettersCount}
+            {decorated.beforeMaxLettersCount}
             {maxLetters - counterValue}
-            {afterMaxLettersCount}
+            {decorated.afterMaxLettersCount}
           </>
         )
       },
-      [maxLetters, maxLettersCountExceeded, afterMaxLettersCount, beforeMaxLettersCount],
+      [
+        maxLetters,
+        decorated.afterMaxLettersCountExceeded,
+        decorated.afterMaxLettersCount,
+        decorated.beforeMaxLettersCount,
+      ],
     )
 
     const counterVisualMessage = useMemo(() => getCounterMessage(count), [count, getCounterMessage])
@@ -305,9 +278,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
         </span>
         <VisuallyHiddenText aria-live="polite">{srCounterMessage}</VisuallyHiddenText>
         <VisuallyHiddenText id={maxLettersNoticeId}>
-          {beforeScreenReaderMaxLettersDescription}
+          {decorated.beforeScreenReaderMaxLettersDescription}
           {maxLetters}
-          {afterScreenReaderMaxLettersDescription}
+          {decorated.afterScreenReaderMaxLettersDescription}
         </VisuallyHiddenText>
       </span>
     ) : (
diff --git a/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx b/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx
index cfb0ee5f25..795e7526fb 100644
--- a/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx
@@ -21,6 +21,34 @@ export default {
           <Textarea {...args} maxLetters={5} value="テキスト" />
           <Textarea {...args} maxLetters={5} value="テキストエ" />
           <Textarea {...args} maxLetters={5} value="テキストエリア" />
+          <Textarea
+            {...args}
+            maxLetters={5}
+            value="テキストエ"
+            decorators={{
+              beforeMaxLettersCount: (org) => `beforeMaxLettersCount(${org})`,
+              afterMaxLettersCount: (org) => `afterMaxLettersCount(${org})`,
+              afterMaxLettersCountExceeded: (org) => `afterMaxLettersCountExceeded(${org})`,
+              beforeScreenReaderMaxLettersDescription: (org) =>
+                `beforeScreenReaderMaxLettersDescription(${org})`,
+              afterScreenReaderMaxLettersDescription: (org) =>
+                `afterScreenReaderMaxLettersDescription(${org})`,
+            }}
+          />
+          <Textarea
+            {...args}
+            maxLetters={5}
+            value="テキストエリア"
+            decorators={{
+              beforeMaxLettersCount: (org) => `beforeMaxLettersCount(${org})`,
+              afterMaxLettersCount: (org) => `afterMaxLettersCount(${org})`,
+              afterMaxLettersCountExceeded: (org) => `afterMaxLettersCountExceeded(${org})`,
+              beforeScreenReaderMaxLettersDescription: (org) =>
+                `beforeScreenReaderMaxLettersDescription(${org})`,
+              afterScreenReaderMaxLettersDescription: (org) =>
+                `afterScreenReaderMaxLettersDescription(${org})`,
+            }}
+          />
           <Textarea {...args} placeholder="テキストエリア" />
         </Stack>
       ))}
diff --git a/packages/smarthr-ui/src/hooks/useDecorators.ts b/packages/smarthr-ui/src/hooks/useDecorators.ts
new file mode 100644
index 0000000000..ffc5532bee
--- /dev/null
+++ b/packages/smarthr-ui/src/hooks/useDecorators.ts
@@ -0,0 +1,27 @@
+import { ReactNode, useMemo } from 'react'
+
+export type DecoratorsType<T extends string> = {
+  [K in T]?: DecoratorType
+}
+
+export type DecoratorType = (text: string) => ReactNode
+
+export const useDecorators = <T extends string>(
+  defaultTexts: { [K in T]: string },
+  decorators: DecoratorsType<T> | undefined,
+) =>
+  useMemo(() => {
+    if (!decorators) {
+      return defaultTexts
+    }
+
+    const decorated = {} as { [K in T]: ReactNode }
+
+    for (const key in defaultTexts) {
+      const value = defaultTexts[key]
+
+      decorated[key] = decorators[key]?.(value) || value
+    }
+
+    return decorated
+  }, [decorators, defaultTexts])
diff --git a/packages/smarthr-ui/src/types/Decorator.ts b/packages/smarthr-ui/src/types/Decorator.ts
deleted file mode 100644
index 88ac3b5760..0000000000
--- a/packages/smarthr-ui/src/types/Decorator.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ReactNode } from 'react'
-
-export type DecoratorsType<T extends string> = {
-  [K in T]?: DecoratorType
-}
-
-export type DecoratorType = (text: string) => ReactNode
diff --git a/packages/smarthr-ui/src/types/index.ts b/packages/smarthr-ui/src/types/index.ts
index 34b138e3c0..cad56cd123 100644
--- a/packages/smarthr-ui/src/types/index.ts
+++ b/packages/smarthr-ui/src/types/index.ts
@@ -1,5 +1,4 @@
 export type { Gap, SeparateGap } from './Gap'
-export type { DecoratorsType, DecoratorType } from './Decorator'
 export type { ResponseMessageType } from './ResponseMessage'
 export type { LocaleMap } from './Locale'
 export type { ElementRef, ElementRefProps } from './ComponentTypes'