diff --git a/src/core/components/Select/SelectOnset/SelectOnset/SelectOnset.stories.tsx b/src/core/components/Select/SelectOnset/SelectOnset/SelectOnset.stories.tsx
new file mode 100644
index 0000000..5f80cc9
--- /dev/null
+++ b/src/core/components/Select/SelectOnset/SelectOnset/SelectOnset.stories.tsx
@@ -0,0 +1,47 @@
+import { Meta } from "@storybook/react";
+import { ChangeEvent, useState } from "react";
+
+import { SelectOnsetOptions } from "./constants";
+import SelectOnset from "./index";
+
+const meta = {
+  title: "core/Select/SelectOnset",
+  component: SelectOnset,
+  argTypes: {
+    variants: {
+      control: "select",
+      options: SelectOnsetOptions,
+      description: "SelectOnset Variants",
+    },
+  },
+} satisfies Meta<typeof SelectOnset>;
+
+export default meta;
+
+export const Vertical = () => {
+  const [ currentOnset, setCurrentOnset ] = useState("ㄱ");
+
+  const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => setCurrentOnset(e.target.value);
+
+  return (
+    <SelectOnset
+      onChange = {onChangeHandler}
+      currentOnset = {currentOnset}
+      variants = {"vertical"}
+    />
+  );
+};
+
+export const Horizontal = () => {
+  const [ currentOnset, setCurrentOnset ] = useState("ㄱ");
+
+  const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => setCurrentOnset(e.target.value);
+
+  return (
+    <SelectOnset
+      onChange = {onChangeHandler}
+      currentOnset = {currentOnset}
+      variants = {"horizontal"}
+    />
+  );
+};
diff --git a/src/core/components/Select/SelectOnset/SelectOnset/constants/index.ts b/src/core/components/Select/SelectOnset/SelectOnset/constants/index.ts
new file mode 100644
index 0000000..424e8c3
--- /dev/null
+++ b/src/core/components/Select/SelectOnset/SelectOnset/constants/index.ts
@@ -0,0 +1,20 @@
+import { VariantsType } from "../types";
+
+export const ONSETS = [ "ㄱ", "ㄴ", "ㄷ", "ㄹ", "ㅁ", "ㅂ", "ㅅ", "ㅇ", "ㅈ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ" ];
+
+export const VARIANTS = {
+  VERTICAL: "vertical",
+  HORIZONTAL: "horizontal",
+} as const;
+
+export const ONSETS_CONTAINER_VARIANTS: Record<VariantsType, string> = {
+  [VARIANTS.VERTICAL]: "flex-v-stack",
+  [VARIANTS.HORIZONTAL]: "flex-h-stack items-center",
+};
+
+export const ONSETS_VARIANTS: Record<VariantsType, string> = {
+  [VARIANTS.VERTICAL]: "gap-x-2",
+  [VARIANTS.HORIZONTAL]: "gap-x-3",
+};
+
+export const SelectOnsetOptions = Object.keys(VARIANTS).map(variants => VARIANTS[variants as keyof typeof VARIANTS]);
diff --git a/src/core/components/Select/SelectOnset/SelectOnset/index.tsx b/src/core/components/Select/SelectOnset/SelectOnset/index.tsx
new file mode 100644
index 0000000..4d532bc
--- /dev/null
+++ b/src/core/components/Select/SelectOnset/SelectOnset/index.tsx
@@ -0,0 +1,35 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+
+import Typography from "../../../Typography";
+import SelectOnsetItem from "../SelectOnsetItem";
+import { ONSETS, ONSETS_CONTAINER_VARIANTS, ONSETS_VARIANTS } from "./constants";
+import { SelectOnsetProps } from "./types";
+
+const SelectOnset = forwardRef((
+    {
+      variants,
+      currentOnset,
+      onChange,
+      className,
+    }: SelectOnsetProps,
+    ref: React.Ref<HTMLUListElement>,
+  ) => {
+  const items = ONSETS.map(onset => (
+    <SelectOnsetItem key = {onset} onset = {onset} onChange = {onChange} checked = {currentOnset === onset}/>
+  ));
+
+  return (
+    <div className = {clsx(`${ONSETS_CONTAINER_VARIANTS[variants]} flex gap-3`, className)}>
+      <Typography theme = "body-02-regular" color = "gray-07" text = "초성으로 원아 찾기"/>
+      <ul ref = {ref} className = {`flex items-center ${ONSETS_VARIANTS[variants]}`}>
+        {items}
+      </ul>
+    </div>
+  );
+});
+
+export default SelectOnset;
+
+SelectOnset.displayName = "SelectOnset";
+
diff --git a/src/core/components/Select/SelectOnset/SelectOnset/types/index.ts b/src/core/components/Select/SelectOnset/SelectOnset/types/index.ts
new file mode 100644
index 0000000..1743bbb
--- /dev/null
+++ b/src/core/components/Select/SelectOnset/SelectOnset/types/index.ts
@@ -0,0 +1,13 @@
+import { InputHTMLAttributes } from "react";
+
+import { ONSETS, VARIANTS } from "../constants";
+
+export type VariantsType = typeof VARIANTS[keyof typeof VARIANTS];
+
+export type OnsetType = typeof ONSETS[number];
+
+export interface SelectOnsetProps extends Pick<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  variants: VariantsType;
+  currentOnset: string;
+  className?: HTMLElement["className"];
+}
diff --git a/src/core/components/Select/SelectOnset/SelectOnsetItem/SelectOnsetItem.stories.tsx b/src/core/components/Select/SelectOnset/SelectOnsetItem/SelectOnsetItem.stories.tsx
new file mode 100644
index 0000000..e9fafbd
--- /dev/null
+++ b/src/core/components/Select/SelectOnset/SelectOnsetItem/SelectOnsetItem.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta } from "@storybook/react";
+
+import { ONSETS } from "../SelectOnset/constants";
+import SelectOnsetItem from "./index";
+import { OnsetItemProps } from "./types";
+
+const meta = {
+  title: "core/Select/SelectOnsetItem",
+  component: SelectOnsetItem,
+  argTypes: {
+    onset: {
+      control: "select",
+      options: ONSETS,
+      description: "onset",
+    },
+  },
+} satisfies Meta<typeof SelectOnsetItem>;
+
+export default meta;
+
+export const Default = (props: OnsetItemProps) => {
+  return (
+    <ul>
+      <SelectOnsetItem
+        onset = {"ㄱ"}
+        checked = {"ㄱ" === props.onset}
+      />
+    </ul>
+  );
+};
+
diff --git a/src/core/components/Select/SelectOnset/SelectOnsetItem/index.tsx b/src/core/components/Select/SelectOnset/SelectOnsetItem/index.tsx
new file mode 100644
index 0000000..55bf6d5
--- /dev/null
+++ b/src/core/components/Select/SelectOnset/SelectOnsetItem/index.tsx
@@ -0,0 +1,40 @@
+import { forwardRef, useId } from "react";
+
+import { Typography } from "@/index";
+import { OnsetItemProps } from "./types";
+
+const SelectOnsetItem = forwardRef((
+    {
+      onset,
+      ...props
+    }: OnsetItemProps,
+    ref: React.Ref<HTMLInputElement>,
+  ) => {
+  const id = useId();
+
+  return (
+    <li>
+      <label>
+        <input
+          ref = {ref}
+          id = {id}
+          type = "radio"
+          className = {"sr-only peer"}
+          name = "onset"
+          value = {onset}
+          {...props}
+        />
+        <Typography
+          className = "flex items-center justify-center w-[1.875rem] h-[1.875rem] border border-gray-03 peer-checked:text-primary-03 peer-checked:bg-primary-00 peer-checked:border-primary-00 rounded cursor-pointer"
+          theme = "body-02-regular"
+          color = "gray-06"
+          text = {onset}
+        />
+      </label>
+    </li>
+  );
+});
+
+export default SelectOnsetItem;
+
+SelectOnsetItem.displayName = "SelectOnsetItem";
diff --git a/src/core/components/Select/SelectOnset/SelectOnsetItem/types/index.ts b/src/core/components/Select/SelectOnset/SelectOnsetItem/types/index.ts
new file mode 100644
index 0000000..59e63f8
--- /dev/null
+++ b/src/core/components/Select/SelectOnset/SelectOnsetItem/types/index.ts
@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from "react";
+
+import { OnsetType } from "../../SelectOnset/types";
+
+export interface OnsetItemProps extends InputHTMLAttributes<HTMLInputElement>{
+  onset: OnsetType
+}
diff --git a/src/index.ts b/src/index.ts
index c75b9d3..939fce3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -15,6 +15,7 @@ export { default as ModalBase } from "@/core/components/Modal/ModalBase";
 export { default as ModalPopUp } from "@/core/components/Modal/ModalPopUp";
 export { default as ModalPortal } from "@/core/components/Modal/ModalPortal";
 export { default as Section } from "@/core/components/Section";
+export { default as SelectOnset } from "@/core/components/Select/SelectOnset/SelectOnset";
 export { default as GeneralTab } from "@/core/components/Tab/GeneralTab/GeneralTab";
 export { default as GeneralTabItem } from "@/core/components/Tab/GeneralTab/GeneralTabItem";
 export { default as TableTab } from "@/core/components/Tab/TableTab/TableTab";