diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-input.tsx b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-input.tsx
index 54eb96a99..4eadc709f 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-input.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-input.tsx
@@ -2,7 +2,7 @@ import { ARIA_LABELS, ComponentName } from "@wizleap-inc/wiz-ui-constants";
 import * as styles from "@wizleap-inc/wiz-ui-styles/bases/search-input.css";
 import { inputBorderStyle } from "@wizleap-inc/wiz-ui-styles/commons";
 import clsx from "clsx";
-import { FC, KeyboardEventHandler, useMemo, useRef, useState } from "react";
+import { KeyboardEventHandler, useMemo, useRef, useState } from "react";
 
 import {
   TIcon,
@@ -15,11 +15,11 @@ import {
 import { BaseProps } from "@/types";
 
 import { SearchPopupPanel } from "./search-popup-panel";
-import { SearchInputOption } from "./types";
+import { CheckboxOption, SearchInputOption } from "./types";
 
-type Props = BaseProps & {
-  options: SearchInputOption[];
-  values: number[];
+type Props<T extends CheckboxOption> = BaseProps & {
+  options: SearchInputOption<T>[];
+  values: T[];
   name?: string;
   placeholder?: string;
   disabled?: boolean;
@@ -32,13 +32,13 @@ type Props = BaseProps & {
   icon?: TIcon;
   showSelectedItem?: boolean;
   showParentLabel?: boolean;
-  onChangeValues: (values: number[]) => void;
+  onChangeValues: (values: T[]) => void;
 };
 
-function filterOptions(
-  options: SearchInputOption[],
+function filterOptions<T extends CheckboxOption>(
+  options: SearchInputOption<T>[],
   text: string
-): SearchInputOption[] {
+): SearchInputOption<T>[] {
   return options.flatMap((option) => {
     const isMatched = option.label.includes(text);
     if (!option.children || option.children.length === 0) {
@@ -56,7 +56,7 @@ function filterOptions(
   });
 }
 
-const SearchInput: FC<Props> = ({
+const SearchInput = <T extends CheckboxOption>({
   className,
   style,
   options,
@@ -74,21 +74,23 @@ const SearchInput: FC<Props> = ({
   onChangeValues,
   showParentLabel,
   icon = WizISearch,
-}) => {
+}: Props<T>) => {
   const [filteringText, setFilteringText] = useState("");
   const [isFocused, setIsFocused] = useState(false);
   const [isPopupOpen, setIsPopupOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const filteredOptions = useMemo(
-    () => filterOptions(options, filteringText),
+    () => filterOptions<T>(options, filteringText),
     [filteringText, options]
   );
 
   const valueToOptions = useMemo(() => {
-    const map = new Map<number, SearchInputOption>();
+    const map = new Map<T, SearchInputOption<T>>();
 
-    const flatten = (options: SearchInputOption[]): SearchInputOption[] => {
+    const flatten = (
+      options: SearchInputOption<T>[]
+    ): SearchInputOption<T>[] => {
       return options.flatMap((option) => {
         if (!option.children) return [option];
 
@@ -113,12 +115,12 @@ const SearchInput: FC<Props> = ({
 
   const IconComponent = icon;
 
-  const onClear = (value: number) => {
+  const onClear = (value: T) => {
     const newValues = values.filter((v) => v !== value);
     onChangeValues(newValues);
   };
 
-  const handleKeyDown = (value: number): KeyboardEventHandler => {
+  const handleKeyDown = (value: T): KeyboardEventHandler => {
     return (e) => {
       if (e.key === "Backspace") {
         onClear(value);
@@ -128,7 +130,7 @@ const SearchInput: FC<Props> = ({
 
   const displayingSelectedItems = showSelectedItem && values.length > 0;
 
-  const handleClickPanelItem = (value: number[]) => {
+  const handleClickPanelItem = (value: T[]) => {
     onChangeValues(value);
     setFilteringText("");
   };
@@ -162,7 +164,7 @@ const SearchInput: FC<Props> = ({
               {showSelectedItem &&
                 values.map((value) => (
                   <span
-                    key={value}
+                    key={value.toString()}
                     className={styles.searchInputInnerBoxSelectedItemStyle}
                   >
                     <span
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-popup-panel.tsx b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-popup-panel.tsx
index 7e9f06291..0fb5b8de3 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-popup-panel.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-popup-panel.tsx
@@ -1,6 +1,6 @@
 import * as styles from "@wizleap-inc/wiz-ui-styles/bases/search-input.css";
 import clsx from "clsx";
-import { FC, useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 import {
   WizCheckBoxNew,
@@ -12,19 +12,19 @@ import {
 } from "@/components";
 import { BaseProps } from "@/types";
 
-import { SearchInputOption } from "./types";
+import { CheckboxOption, SearchInputOption } from "./types";
 
-type Props = BaseProps & {
-  options: SearchInputOption[];
-  values: number[];
+type Props<T extends CheckboxOption> = BaseProps & {
+  options: SearchInputOption<T>[];
+  values: T[];
   width?: string;
   emptyMessage: string;
   singleSelect?: boolean;
-  onChangeValues: (values: number[]) => void;
+  onChangeValues: (values: T[]) => void;
   closePopup: () => void;
 };
 
-export const SearchPopupPanel: FC<Props> = ({
+export const SearchPopupPanel = <T extends CheckboxOption>({
   className,
   style,
   options,
@@ -34,8 +34,8 @@ export const SearchPopupPanel: FC<Props> = ({
   singleSelect,
   onChangeValues,
   closePopup,
-}) => {
-  const [activeValue, setActiveValue] = useState<number | null>(null);
+}: Props<T>) => {
+  const [activeValue, setActiveValue] = useState<T | null>(null);
   const activeOption = useMemo(
     () => options.find((option) => activeValue === option.value),
     [activeValue, options]
@@ -45,7 +45,7 @@ export const SearchPopupPanel: FC<Props> = ({
   const isOpen = activeOptionChildren !== undefined;
 
   const handleChangeValues = useCallback(
-    (selectedOptionValue: number, isChecked: boolean) => {
+    (selectedOptionValue: T, isChecked: boolean) => {
       const newValues = (() => {
         if (isChecked) {
           return [...values, selectedOptionValue];
@@ -58,7 +58,7 @@ export const SearchPopupPanel: FC<Props> = ({
     [onChangeValues, values]
   );
 
-  const handleClickButton = (value: number) => {
+  const handleClickButton = (value: T) => {
     onChangeValues([value]);
     closePopup();
   };
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/types.ts b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/types.ts
index a437ced2f..a60d2070a 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/types.ts
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/types.ts
@@ -1,10 +1,10 @@
 export type Tag = {
   label: string;
 };
-
-export type SearchInputOption = {
+export type CheckboxOption = string | number | string[]; // WizCheckBoxNew
+export type SearchInputOption<T> = {
   label: string;
-  value: number;
-  children?: SearchInputOption[];
+  value: T;
+  children?: SearchInputOption<T>[];
   tag?: Tag;
 };
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/dummy-data.ts b/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/dummy-data.ts
index df55c5413..cc0675560 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/dummy-data.ts
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/dummy-data.ts
@@ -4,7 +4,7 @@ const tag = {
   label: "タグ",
 };
 
-export const normalOptions: SearchInputOption[] = [
+export const normalOptions: SearchInputOption<number>[] = [
   {
     label: "テスト会社1",
     value: 1,
@@ -208,7 +208,7 @@ export const normalOptions: SearchInputOption[] = [
   },
 ];
 
-export const longLabelOptions: SearchInputOption[] = [
+export const longLabelOptions: SearchInputOption<number>[] = [
   {
     label: "テスト会社1",
     value: 1,
@@ -233,7 +233,7 @@ export const longLabelOptions: SearchInputOption[] = [
   },
 ];
 
-export const taggedOptions: SearchInputOption[] = [
+export const taggedOptions: SearchInputOption<number>[] = [
   {
     label: "テスト会社1",
     value: 1,
@@ -328,8 +328,8 @@ const getNextValue = (): number => {
 const generateGrandchildren = (
   startValue: number,
   count: number
-): SearchInputOption[] => {
-  const grandchildren: SearchInputOption[] = [];
+): SearchInputOption<number>[] => {
+  const grandchildren: SearchInputOption<number>[] = [];
   for (let i = 0; i < count; i++) {
     const grandchildValue = getNextValue();
     grandchildren.push({
@@ -344,8 +344,8 @@ const generateGrandchildren = (
 const generateChildren = (
   startValue: number,
   count: number
-): SearchInputOption[] => {
-  const children: SearchInputOption[] = [];
+): SearchInputOption<number>[] => {
+  const children: SearchInputOption<number>[] = [];
   for (let i = 0; i < count; i++) {
     const childValue = getNextValue();
     children.push({
@@ -365,8 +365,8 @@ const generateChildren = (
 const generateParentElements = (
   startValue: number,
   count: number
-): SearchInputOption[] => {
-  const parentElements: SearchInputOption[] = [];
+): SearchInputOption<number>[] => {
+  const parentElements: SearchInputOption<number>[] = [];
   for (let i = 0; i < count; i++) {
     const parentValue = getNextValue();
     parentElements.push({
@@ -378,7 +378,7 @@ const generateParentElements = (
   return parentElements;
 };
 
-export const debugOptions: SearchInputOption[] = [
+export const debugOptions: SearchInputOption<number>[] = [
   {
     label: "親要素1",
     value: getNextValue(),
@@ -397,7 +397,7 @@ export const debugOptions: SearchInputOption[] = [
   ...generateParentElements(getNextValue(), 13),
 ];
 
-export const emptyMessageOptions: SearchInputOption[] = [
+export const emptyMessageOptions: SearchInputOption<number>[] = [
   {
     label: "テスト会社1",
     value: 1,
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/search-input.stories.tsx b/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/search-input.stories.tsx
index 142a2238c..13a99ef30 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/search-input.stories.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/search-input.stories.tsx
@@ -21,7 +21,7 @@ const meta: Meta<typeof WizSearchInput> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof WizSearchInput>;
+type Story = StoryObj<typeof WizSearchInput<number>>;
 
 const Template: Story = {
   render: (args) => {
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/components/button-item.tsx b/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/components/button-item.tsx
index 8d91b8618..80d6f1c93 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/components/button-item.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/components/button-item.tsx
@@ -6,26 +6,26 @@ import {
   popupButtonGroupInnerContainerStyle,
 } from "@wizleap-inc/wiz-ui-styles/bases/search-selector.css";
 import clsx from "clsx";
-import { FC, KeyboardEvent, useMemo, useState } from "react";
+import { KeyboardEvent, useMemo, useState } from "react";
 
 import { WizIcon } from "@/components";
 import { BaseProps } from "@/types";
 
 import { ButtonItem as ButtonItemType } from "../types";
 
-type Props = BaseProps & {
-  item: ButtonItemType;
+type Props<T> = BaseProps & {
+  item: ButtonItemType<T>;
   disabled: boolean;
   depth: number;
 };
 
-export const ButtonItem: FC<Props> = ({
+export const ButtonItem = <T,>({
   className,
   style,
   item,
   disabled,
   depth,
-}) => {
+}: Props<T>) => {
   const [isClicking, setIsClicking] = useState(false);
   const [isHover, setIsHover] = useState(false);
 
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/components/group-item.tsx b/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/components/group-item.tsx
index a5af626bf..4b21d4f8c 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/components/group-item.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/components/group-item.tsx
@@ -4,7 +4,6 @@ import {
   popupButtonGroupTitleVariantStyle,
 } from "@wizleap-inc/wiz-ui-styles/bases/search-selector.css";
 import clsx from "clsx";
-import { FC } from "react";
 
 import { BaseProps } from "@/types";
 
@@ -12,19 +11,19 @@ import { GroupItem as GroupItemType } from "../types";
 
 import { PopupButtonGroup } from "./popup-button-group";
 
-type Props = BaseProps & {
-  item: GroupItemType;
+type Props<T> = BaseProps & {
+  item: GroupItemType<T>;
   disabled: boolean;
   depth: number;
 };
 
-export const GroupItem: FC<Props> = ({
+export const GroupItem = <T,>({
   className,
   style,
   item,
   disabled,
   depth,
-}) => {
+}: Props<T>) => {
   return (
     <div className={className} style={style}>
       <span
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/components/popup-button-group.tsx b/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/components/popup-button-group.tsx
index 0257d34d5..323d69626 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/components/popup-button-group.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/components/popup-button-group.tsx
@@ -5,7 +5,7 @@ import {
   popupButtonGroupStyle,
 } from "@wizleap-inc/wiz-ui-styles/bases/search-selector.css";
 import clsx from "clsx";
-import { FC, useMemo } from "react";
+import { useMemo } from "react";
 
 import { WizVStack } from "@/components";
 import { BaseProps } from "@/types";
@@ -16,8 +16,8 @@ import { ButtonItem } from "./button-item";
 import { DividerItem } from "./divider-item";
 import { GroupItem } from "./group-item";
 
-type Props = BaseProps & {
-  options: ButtonGroupItem[];
+type Props<T> = BaseProps & {
+  options: ButtonGroupItem<T>[];
   width?: string;
   p?: SpacingKeys;
   borderRadius?: SpacingKeys;
@@ -28,7 +28,7 @@ type Props = BaseProps & {
   depth?: number;
 };
 
-export const PopupButtonGroup: FC<Props> = ({
+export const PopupButtonGroup = <T,>({
   className,
   style,
   options,
@@ -40,15 +40,15 @@ export const PopupButtonGroup: FC<Props> = ({
   groupDivider = false,
   buttonDivider = false,
   depth = 0,
-}) => {
+}: Props<T>) => {
   const items = useMemo(() => {
-    const divider: ItemElement = { kind: "divider" };
+    const divider: ItemElement<T> = { kind: "divider" };
     const items = options
       .map((opt, i) => {
         if (opt.kind === "divider") {
           return [divider];
         }
-        const optionItem: ItemElement = {
+        const optionItem: ItemElement<T> = {
           kind: "item",
           item: opt,
         };
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/types.ts b/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/types.ts
index 6cf36d2e4..5e8b5c72b 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/types.ts
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/popup-button-group/types.ts
@@ -1,8 +1,8 @@
 import { TIcon } from "@/components";
 
-export interface PopupButtonOption {
+export interface PopupButtonOption<T> {
   label: string;
-  value: number;
+  value?: T;
   exLabel?: string;
   icon?: TIcon;
   iconDefaultColor?: "green.800" | "gray.500";
@@ -10,27 +10,27 @@ export interface PopupButtonOption {
   onClick: () => void;
 }
 
-export interface ButtonItem {
+export interface ButtonItem<T> {
   kind: "button";
-  option: PopupButtonOption;
+  option: PopupButtonOption<T>;
 }
 
 interface DividerItem {
   kind: "divider";
 }
 
-export interface GroupItem {
+export interface GroupItem<T> {
   kind: "group";
   title: string;
   // 再帰参照を許可するためにno-use-before-define無効化
   // eslint-disable-next-line no-use-before-define
-  items: ButtonGroupItem[];
+  items: ButtonGroupItem<T>[];
   groupDivider?: boolean;
   buttonDivider?: boolean;
 }
 
-export type ButtonGroupItem = ButtonItem | DividerItem | GroupItem;
+export type ButtonGroupItem<T> = ButtonItem<T> | DividerItem | GroupItem<T>;
 
-export type ItemElement =
+export type ItemElement<T> =
   | DividerItem
-  | { kind: "item"; item: Exclude<ButtonGroupItem, DividerItem> };
+  | { kind: "item"; item: Exclude<ButtonGroupItem<T>, DividerItem> };
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/search-selector-helper.ts b/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/search-selector-helper.ts
index a2d025110..d968bf720 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/search-selector-helper.ts
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/search-selector-helper.ts
@@ -19,8 +19,8 @@ function levenshteinDistance(s1: string, s2: string): number {
   return dist[s1.length][s2.length] / Math.max(s1.length, s2.length);
 }
 
-export function filterOptions(
-  options: SearchSelectorOption[],
+export function filterOptions<T>(
+  options: SearchSelectorOption<T>[],
   searchText: string,
   threshold: number
 ) {
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/search-selector.tsx b/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/search-selector.tsx
index a4d450311..ac0b8f965 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/search-selector.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/search-selector.tsx
@@ -3,7 +3,6 @@ import * as styles from "@wizleap-inc/wiz-ui-styles/bases/search-selector.css";
 import { inputBorderStyle } from "@wizleap-inc/wiz-ui-styles/commons";
 import clsx from "clsx";
 import {
-  FC,
   KeyboardEvent,
   KeyboardEventHandler,
   MouseEventHandler,
@@ -31,9 +30,9 @@ import { ButtonGroupItem } from "./popup-button-group/types";
 import { filterOptions } from "./search-selector-helper";
 import { SearchSelectorOption } from "./types";
 
-type Props = BaseProps & {
-  options: SearchSelectorOption[];
-  values: number[];
+type Props<T> = BaseProps & {
+  options: SearchSelectorOption<T>[];
+  values: T[];
   placeholder?: string;
   width?: string;
   disabled?: boolean;
@@ -51,12 +50,12 @@ type Props = BaseProps & {
    * @default 0.75
    */
   threshold?: number;
-  onChangeValues: (values: number[]) => void;
+  onChangeValues: (values: T[]) => void;
   onCreate?: (label: string) => void;
   onInputSearchText?: (text: string) => void;
 };
 
-const SearchSelector: FC<Props> = ({
+const SearchSelector = <T,>({
   className,
   style,
   options,
@@ -75,7 +74,7 @@ const SearchSelector: FC<Props> = ({
   onChangeValues,
   onCreate,
   onInputSearchText,
-}) => {
+}: Props<T>) => {
   const [searchText, setSearchText] = useState("");
   const [isPopupOpen, setIsPopupOpen] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
@@ -100,7 +99,7 @@ const SearchSelector: FC<Props> = ({
     );
   }, [selectedOptions.length]);
 
-  const buttonGroupOptions: ButtonGroupItem[] = useMemo(() => {
+  const buttonGroupOptions: ButtonGroupItem<T>[] = useMemo(() => {
     const filteredOptions = filterOptions(
       options,
       searchText,
@@ -108,7 +107,7 @@ const SearchSelector: FC<Props> = ({
     ).filter((matchedOption) => {
       return !values.some((value) => matchedOption.value === value);
     });
-    const buttonGroupOptions: ButtonGroupItem[] = filteredOptions.map(
+    const buttonGroupOptions: ButtonGroupItem<T>[] = filteredOptions.map(
       (option) => {
         return {
           kind: "button",
@@ -143,7 +142,6 @@ const SearchSelector: FC<Props> = ({
               label: searchText,
               icon: WizIAddCircle,
               iconDefaultColor: "green.800",
-              value: -1,
               onClick: () => {
                 onCreate?.(searchText);
                 setSearchText("");
@@ -165,7 +163,7 @@ const SearchSelector: FC<Props> = ({
     values,
   ]);
 
-  const unselectOption = (option: SearchSelectorOption) => {
+  const unselectOption = (option: SearchSelectorOption<T>) => {
     onChangeValues(values.filter((value) => value !== option.value));
     setTimeout(() => {
       // input 要素が描画されるのを待ってフォーカス
@@ -174,7 +172,7 @@ const SearchSelector: FC<Props> = ({
   };
 
   const handleClickClearButton = (
-    option: SearchSelectorOption
+    option: SearchSelectorOption<T>
   ): MouseEventHandler => {
     return (e) => {
       e.stopPropagation();
@@ -196,7 +194,7 @@ const SearchSelector: FC<Props> = ({
   };
 
   const keyDownHandlers = {
-    clearButton: (option: SearchSelectorOption): KeyboardEventHandler => {
+    clearButton: (option: SearchSelectorOption<T>): KeyboardEventHandler => {
       return (e) => {
         if (e.key === "Backspace") {
           unselectOption(option);
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/types.ts b/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/types.ts
index c51ef36c5..977337fa2 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/types.ts
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-selector/components/types.ts
@@ -1,6 +1,6 @@
-export type SearchSelectorOption = {
+export type SearchSelectorOption<T> = {
   label: string;
-  value: number;
+  value: T;
   exLabel?: string;
   disabled?: boolean;
 };
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-selector/stories/search-selector.stories.tsx b/packages/wiz-ui-react/src/components/base/inputs/search-selector/stories/search-selector.stories.tsx
index 576a02e1a..aca40b43e 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-selector/stories/search-selector.stories.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-selector/stories/search-selector.stories.tsx
@@ -34,10 +34,10 @@ v-modelには選択中のアイテムを渡します。
 };
 
 export default meta;
-type Story = StoryObj<typeof WizSearchSelector>;
+type Story = StoryObj<typeof WizSearchSelector<number>>;
 
 const getDummyOptions = (label: string, count: number, exLabel?: string) => {
-  const options: SearchSelectorOption[] = [];
+  const options: SearchSelectorOption<number>[] = [];
   for (let i = 1; i <= count; i++) {
     options.push({ label: label + i, value: i, exLabel });
     options.push({ label: label + i * 10, value: i * 10, exLabel });
@@ -49,7 +49,7 @@ const getTemplate = (initialValues: number[] = []): Story => {
   return {
     render: (args) => {
       const [values, setValues] = useState<number[]>(initialValues);
-      const [options, setOptions] = useState<SearchSelectorOption[]>(
+      const [options, setOptions] = useState<SearchSelectorOption<number>[]>(
         args.options
       );
       const onCreate = useCallback(
diff --git a/packages/wiz-ui-react/src/components/base/inputs/selectbox/components/selectbox.tsx b/packages/wiz-ui-react/src/components/base/inputs/selectbox/components/selectbox.tsx
index 230222a80..76e8a7db1 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/selectbox/components/selectbox.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/selectbox/components/selectbox.tsx
@@ -3,7 +3,6 @@ import * as styles from "@wizleap-inc/wiz-ui-styles/bases/selectbox-input.css";
 import { inputBorderStyle } from "@wizleap-inc/wiz-ui-styles/commons";
 import clsx from "clsx";
 import {
-  FC,
   KeyboardEventHandler,
   useCallback,
   useContext,
@@ -22,16 +21,16 @@ import {
 } from "@/components";
 import { FormControlContext } from "@/components/custom/form/components/form-control-context";
 import { BaseProps } from "@/types";
-type SelectBoxOption = {
+type SelectBoxOption<T> = {
   label: string;
   exLabel?: string;
-  value: number;
+  value: T;
   disabled?: boolean;
 };
 
-type Props = BaseProps & {
-  options: SelectBoxOption[];
-  value: number | null;
+type Props<T> = BaseProps & {
+  options: SelectBoxOption<T>[];
+  value: T | null;
   placeholder?: string;
   width?: string;
   disabled?: boolean;
@@ -40,10 +39,10 @@ type Props = BaseProps & {
   isDirectionFixed?: boolean;
   showExLabel?: boolean;
   dropdownMaxHeight?: string;
-  onChange: (value: number | null) => void;
+  onChange: (value: T | null) => void;
 };
 
-const SelectBox: FC<Props> = ({
+const SelectBox = <T,>({
   className,
   style,
   options,
@@ -57,7 +56,7 @@ const SelectBox: FC<Props> = ({
   showExLabel = false,
   dropdownMaxHeight,
   onChange,
-}) => {
+}: Props<T>) => {
   const [isOpen, setIsOpen] = useState(false);
   const anchorRef = useRef<HTMLDivElement>(null);
   const formControl = useContext(FormControlContext);
@@ -80,7 +79,7 @@ const SelectBox: FC<Props> = ({
     setIsOpen(!isOpen);
   };
 
-  const handleClickOption = (option: SelectBoxOption) => {
+  const handleClickOption = (option: SelectBoxOption<T>) => {
     setIsOpen(false);
     onChange(option.value);
   };
diff --git a/packages/wiz-ui-react/src/components/base/inputs/selectbox/stories/selectbox.stories.tsx b/packages/wiz-ui-react/src/components/base/inputs/selectbox/stories/selectbox.stories.tsx
index 4f1e1d77d..5628d8ac8 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/selectbox/stories/selectbox.stories.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/selectbox/stories/selectbox.stories.tsx
@@ -11,7 +11,7 @@ const meta: Meta<typeof WizSelectBox> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof WizSelectBox>;
+type Story = StoryObj<typeof WizSelectBox<number>>;
 
 const getDummyOptions = (label: string, length: number, exLabel?: string) => {
   return Array.from({ length }).map((_, i) => ({
diff --git a/packages/wiz-ui-react/src/components/custom/chat/components/chat-card.tsx b/packages/wiz-ui-react/src/components/custom/chat/components/chat-card.tsx
index b3c41c99b..380c68293 100644
--- a/packages/wiz-ui-react/src/components/custom/chat/components/chat-card.tsx
+++ b/packages/wiz-ui-react/src/components/custom/chat/components/chat-card.tsx
@@ -3,7 +3,6 @@ import * as styles from "@wizleap-inc/wiz-ui-styles/customs/chat-card.css";
 import { formatDateToMonthDayWeek } from "@wizleap-inc/wiz-ui-utils";
 import {
   ComponentProps,
-  FC,
   Fragment,
   useCallback,
   useEffect,
@@ -34,7 +33,7 @@ import { WizChatForm, WizChatItem } from ".";
 
 const TOGGLE_ANIMATION_DURATION = 300;
 
-type Props = BaseProps & {
+type Props<T> = BaseProps & {
   textValue: string;
   username: string;
   isOpen: boolean;
@@ -43,16 +42,16 @@ type Props = BaseProps & {
   haveNewMessage?: boolean;
   formRows?: number;
   typingUsername?: string;
-  status?: number | null;
-  statusOptions?: ComponentProps<typeof WizSelectBox>["options"];
+  status?: T | null;
+  statusOptions?: ComponentProps<typeof WizSelectBox<T>>["options"];
   statusPlaceholder?: string;
-  onChangeStatus?: (status: number | null) => void;
+  onChangeStatus?: (status: T | null) => void;
   onChangeTextValue: (value: string) => void;
   onSubmit: () => void;
   onToggle: () => void;
 };
 
-const ChatCard: FC<Props> = ({
+const ChatCard = <T,>({
   className,
   style,
   isOpen,
@@ -70,7 +69,7 @@ const ChatCard: FC<Props> = ({
   onChangeTextValue,
   onSubmit,
   onToggle,
-}) => {
+}: Props<T>) => {
   const wrapperBoxRef = useRef<HTMLDivElement>(null);
   const dividerRef = useRef<HTMLDivElement>(null);
   const listBoxRef = useRef<HTMLDivElement>(null);
diff --git a/packages/wiz-ui-react/src/components/custom/chat/stories/chat-card.stories.tsx b/packages/wiz-ui-react/src/components/custom/chat/stories/chat-card.stories.tsx
index c5364957a..b5a46d016 100644
--- a/packages/wiz-ui-react/src/components/custom/chat/stories/chat-card.stories.tsx
+++ b/packages/wiz-ui-react/src/components/custom/chat/stories/chat-card.stories.tsx
@@ -65,25 +65,26 @@ const dummyMessages: Message[] = [
     time: new Date("2021-08-02T04:00:00.000+09:00"),
   },
 ];
-const dummyStatusOptions: ComponentProps<typeof WizChatCard>["statusOptions"] =
-  [
-    {
-      label: "ステータス１",
-      value: 1,
-    },
-    {
-      label: "ステータス２",
-      value: 2,
-    },
-    {
-      label: "ステータス３",
-      value: 3,
-    },
-    {
-      label: "ステータス４",
-      value: 4,
-    },
-  ];
+const dummyStatusOptions: ComponentProps<
+  typeof WizChatCard<number>
+>["statusOptions"] = [
+  {
+    label: "ステータス１",
+    value: 1,
+  },
+  {
+    label: "ステータス２",
+    value: 2,
+  },
+  {
+    label: "ステータス３",
+    value: 3,
+  },
+  {
+    label: "ステータス４",
+    value: 4,
+  },
+];
 
 const templateArgs = {
   isOpen: true,