diff --git a/packages/frappe-ui-react/src/components/formControl/formControl.tsx b/packages/frappe-ui-react/src/components/formControl/formControl.tsx
index 7286ee51..04b61a1c 100644
--- a/packages/frappe-ui-react/src/components/formControl/formControl.tsx
+++ b/packages/frappe-ui-react/src/components/formControl/formControl.tsx
@@ -35,19 +35,37 @@ const FormControl: React.FC<FormControlProps> = ({
 
   const renderControl = () => {
     switch (type) {
-      case "select":
+      case "select": {
+        const rawOptions = controlAttrs.options ?? [];
+
+        const normalizedOptions: SelectOption[] = (rawOptions as unknown[]).map(
+          (option) => {
+            if (typeof option === "string") {
+              return { label: option, value: option };
+            }
+            return option as SelectOption;
+          }
+        );
+
         return (
           <Select
             htmlId={htmlId}
-            {...controlAttrs}
             size={size}
             variant={variant}
-            options={controlAttrs.options as (string | SelectOption)[]}
-            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-              controlAttrs.onChange?.(e.target.value);
+            options={normalizedOptions}
+            value={controlAttrs.value as SelectOption | undefined}
+            placeholder={controlAttrs.placeholder}
+            disabled={controlAttrs.disabled}
+            loading={controlAttrs.loading}
+            prefix={controlAttrs.prefix as React.ReactNode}
+            suffix={controlAttrs.suffix as React.ReactNode}
+            onChange={(selected: SelectOption) => {
+              controlAttrs.onChange?.(selected.value);
             }}
           />
         );
+      }
+
       case "autocomplete":
         return (
           <Autocomplete
@@ -56,6 +74,7 @@ const FormControl: React.FC<FormControlProps> = ({
             {...controlAttrs}
           />
         );
+
       case "textarea":
         return (
           <Textarea
@@ -65,6 +84,7 @@ const FormControl: React.FC<FormControlProps> = ({
             variant={variant}
           />
         );
+
       case "checkbox":
         return (
           <Checkbox
@@ -74,6 +94,7 @@ const FormControl: React.FC<FormControlProps> = ({
             size={size}
           />
         );
+
       default:
         return (
           <TextInput
diff --git a/packages/frappe-ui-react/src/components/select/select.interactions.stories.tsx b/packages/frappe-ui-react/src/components/select/select.interactions.stories.tsx
new file mode 100644
index 00000000..6fa20b02
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/select/select.interactions.stories.tsx
@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { userEvent, expect, within } from "storybook/test";
+import Select from "./select";
+import type { SelectOption } from "./types";
+
+const meta: Meta<typeof Select> = {
+  title: "Components/Select/Interactions",
+  component: Select,
+  parameters: {
+    docs: { source: { type: "dynamic" } },
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+const options: SelectOption[] = [
+  { label: "Option 1", value: "1" },
+  { label: "Option 2", value: "2" },
+  { label: "Option 3", value: "3", disabled: true },
+];
+
+export const ControlledSelect: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<SelectOption | undefined>();
+    return (
+      <div className="w-72">
+        <Select
+          options={options}
+          value={selected}
+          onChange={setSelected}
+          placeholder="Select option"
+        />
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+
+    await userEvent.click(button);
+    const listbox = canvas.getByRole("listbox");
+    expect(listbox).toBeInTheDocument();
+
+    const allOptions = canvas.getAllByRole("option");
+    expect(allOptions).toHaveLength(3);
+
+    const disabledOption = canvas.getByRole("option", { name: "Option 3" });
+    expect(disabledOption).toHaveAttribute("aria-disabled", "true");
+    await userEvent.click(disabledOption);
+    expect(button).not.toHaveTextContent("Option 3");
+
+    const option2 = canvas.getByText("Option 2");
+    await userEvent.click(option2);
+    expect(button).toHaveTextContent("Option 2");
+    expect(canvas.queryByRole("listbox")).not.toBeInTheDocument();
+  },
+};
+
+export const DisabledState: Story = {
+  args: {
+    options,
+    disabled: true,
+    placeholder: "Disabled select",
+  },
+  render: (args) => (
+    <div className="w-72">
+      <Select {...args} />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    expect(button).toBeDisabled();
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    options,
+    loading: true,
+    placeholder: "Loading select",
+  },
+  render: (args) => (
+    <div className="w-72">
+      <Select {...args} />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    expect(button).toBeDisabled();
+    const spinner = canvas.getByLabelText("loading");
+    expect(spinner).toBeInTheDocument();
+  },
+};
+export const VariantStyling: Story = {
+  args: {
+    options,
+    variant: "outline",
+    placeholder: "Outline select",
+  },
+  render: (args) => (
+    <div className="w-72">
+      <Select {...args} />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    expect(button).toHaveClass("border-outline-gray-2");
+  },
+};
+
+export const WithPrefixSuffix: Story = {
+  args: {
+    options,
+    prefix: <span>Prefix</span>,
+    suffix: <span>Suffix</span>,
+    placeholder: "Select option",
+  },
+  render: (args) => {
+    const [selected, setSelected] = useState<SelectOption | undefined>();
+    return (
+      <div className="w-72">
+        <Select {...args} value={selected} onChange={setSelected} />
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText("Prefix")).toBeInTheDocument();
+    expect(canvas.getByText("Suffix")).toBeInTheDocument();
+    const button = canvas.getByRole("button");
+    await userEvent.click(button);
+    const option1 = canvas.getByText("Option 1");
+    await userEvent.click(option1);
+    expect(button).toHaveTextContent("Option 1");
+  },
+};
+
+export const Placeholder: Story = {
+  args: {
+    options,
+    placeholder: "Pick one...",
+  },
+  render: (args) => (
+    <div className="w-72">
+      <Select {...args} />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    expect(button).toHaveTextContent("Pick one...");
+  },
+};
diff --git a/packages/frappe-ui-react/src/components/select/select.stories.tsx b/packages/frappe-ui-react/src/components/select/select.stories.tsx
index f8259e7c..8246da8c 100644
--- a/packages/frappe-ui-react/src/components/select/select.stories.tsx
+++ b/packages/frappe-ui-react/src/components/select/select.stories.tsx
@@ -1,90 +1,127 @@
-import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { SelectProps } from "./types";
+import { useState } from "react";
 import Select from "./select";
-import { User } from "lucide-react";
+import type { SelectOption } from "./types";
 
-export default {
+const meta: Meta<typeof Select> = {
   title: "Components/Select",
   component: Select,
-  parameters: { docs: { source: { type: "dynamic" } }, layout: "centered" },
+  parameters: {
+    docs: { source: { type: "dynamic" } },
+    layout: "centered",
+  },
   tags: ["autodocs"],
   argTypes: {
     size: {
-      control: { type: "select", options: ["sm", "md", "lg"] },
+      options: ["sm", "md", "lg"],
+      control: { type: "select" },
       description: "Size of the select input",
     },
     variant: {
-      control: { type: "select", options: ["outline", "subtle"] },
-      description: "Visual variant of the select input",
+      options: ["subtle", "outline", "ghost"],
+      control: { type: "select" },
+      description: "Visual variant of the select component",
+    },
+    state: {
+      options: [undefined, "success", "warning", "error"],
+      control: { type: "select" },
+      description: "Validation / feedback state",
     },
     disabled: {
       control: "boolean",
-      description: "If true, disables the select input",
+      description: "Disables the select input",
     },
-    value: {
-      control: "text",
-      description: "Current value of the select input",
+    loading: {
+      control: "boolean",
+      description: "Shows loading indicator and disables the select",
     },
     placeholder: {
       control: "text",
-      description: "Placeholder text when no value is selected",
+      description: "Placeholder text shown when no value is selected",
     },
     options: {
       control: "object",
-      description:
-        "Array of options to display in the dropdown, each with a label and value",
+      description: "List of selectable options",
     },
-    prefix: {
+    value: {
       control: false,
-      description: "Element to display before the selected value",
+      description: "Currently selected option",
     },
     htmlId: {
       control: "text",
-      description: "HTML id attribute for the select input",
+      description: "HTML id attribute for the select element",
+    },
+    className: {
+      control: "text",
+      description: "Custom CSS class applied to the select wrapper",
+    },
+    prefix: {
+      control: false,
+      description: "ReactNode rendered before the selected value",
+    },
+    suffix: {
+      control: false,
+      description: "ReactNode rendered after the selected value",
     },
     onChange: {
       action: "changed",
-      description: "Callback function when the selected value changes",
+      description: "Callback triggered when the selected value changes",
     },
   },
-} as Meta<typeof Select>;
+};
 
-const Template: StoryObj<SelectProps> = {
-  args: {
-    value: "",
-    options: [
-      { label: "John Doe", value: "john-doe" },
-      { label: "Jane Doe", value: "jane-doe" },
-      { label: "John Smith", value: "john-smith" },
-      { label: "Jane Smith", value: "jane-smith", disabled: true },
-      { label: "John Wayne", value: "john-wayne" },
-      { label: "Jane Wayne", value: "jane-wayne" },
-    ],
-  },
-  render: (args) => {
-    const [value, setValue] = useState(args.value || "");
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+const options: SelectOption[] = [
+  { label: "Option 1", value: "1" },
+  { label: "Option 2", value: "2" },
+  { label: "Option 3", value: "3" },
+];
 
+const Template: Story = {
+  render: (args) => {
+    const [selected, setSelected] = useState<SelectOption | undefined>(
+      args.value
+    );
     return (
-      <div className="p-4 w-[300px]">
+      <div className="w-72">
         <Select
           {...args}
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
+          value={selected}
+          onChange={(val) => {
+            setSelected(val);
+            args.onChange?.(val);
+          }}
         />
       </div>
     );
   },
 };
 
-export const Default = {
+export const Subtle: Story = {
   ...Template,
+  args: {
+    variant: "subtle",
+    placeholder: "Select option",
+    options,
+  },
+};
+
+export const Outline: Story = {
+  ...Template,
+  args: {
+    variant: "outline",
+    placeholder: "Select option",
+    options,
+  },
 };
 
-export const WithPrefix = {
+export const Ghost: Story = {
   ...Template,
   args: {
-    ...Template.args,
-    prefix: () => <User size={16} className="text-ink-gray-9" />,
+    variant: "ghost",
+    placeholder: "Select option",
+    options,
   },
 };
diff --git a/packages/frappe-ui-react/src/components/select/select.tsx b/packages/frappe-ui-react/src/components/select/select.tsx
index 2c615021..2754e2a3 100644
--- a/packages/frappe-ui-react/src/components/select/select.tsx
+++ b/packages/frappe-ui-react/src/components/select/select.tsx
@@ -1,142 +1,179 @@
-import React, { useMemo, useCallback } from "react";
+import React, { useMemo } from "react";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { Check, ChevronDown, Loader2 } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils";
+import type { SelectProps, SelectSize } from "./types";
 
-import type { SelectProps, SelectOption } from "./types";
+const selectVariants = cva(
+  "relative w-full rounded-md flex items-center justify-between transition-colors focus:outline-none",
+  {
+    variants: {
+      size: {
+        sm: "h-7 text-sm px-2",
+        md: "h-8 text-base px-2.5",
+        lg: "h-10 text-lg px-3",
+      },
+      variant: {
+        subtle: "",
+        outline: "",
+        ghost: "",
+      },
+      state: {
+        default: "",
+        error: "",
+        success: "",
+        warning: "",
+      },
+      disabled: {
+        true: "bg-surface-gray-2 text-ink-gray-4 border border-outline-gray-2 cursor-not-allowed",
+        false: "text-ink-gray-8",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "subtle",
+        state: "default",
+        disabled: false,
+        class:
+          "bg-surface-gray-2 border border-surface-gray-2 hover:bg-surface-gray-3 focus:bg-surface-white focus:ring-2 focus:ring-outline-gray-3",
+      },
+      {
+        variant: "outline",
+        state: "default",
+        disabled: false,
+        class:
+          "bg-surface-white border border-outline-gray-2 hover:border-outline-gray-3 focus:ring-2 focus:ring-outline-gray-3",
+      },
+    ],
+    defaultVariants: {
+      size: "md",
+      variant: "subtle",
+      state: "default",
+      disabled: false,
+    },
+  }
+);
+
+const optionVariants = cva(
+  "flex items-center justify-between rounded px-2.5 py-1.5 text-base cursor-pointer data-[highlighted]:bg-surface-gray-3 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[selected]:font-semibold"
+);
 
 const Select: React.FC<SelectProps> = ({
-  size = "sm",
+  htmlId,
+  size = "md",
   variant = "subtle",
+  state,
+  loading = false,
   disabled = false,
   value,
-  placeholder,
-  options,
+  placeholder = "Select...",
+  options = [],
   onChange,
-  htmlId,
   prefix,
+  suffix,
+  className,
 }) => {
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLSelectElement>) => {
-      if (onChange) {
-        onChange(e);
-      }
-    },
-    [onChange]
-  );
-
-  const selectOptions = useMemo(() => {
-    return (
-      options
-        ?.map((option) => {
-          if (typeof option === "string") {
-            return {
-              label: option,
-              value: option,
-            } as SelectOption;
-          }
-          return option as SelectOption;
-        })
-        .filter(Boolean) || []
-    );
-  }, [options]);
-
-  const textColor = useMemo(() => {
-    return disabled ? "text-ink-gray-4" : "text-ink-gray-8";
-  }, [disabled]);
+  const isDisabled = disabled || loading;
+  const stateKey = state ?? "default";
 
-  const fontSizeClasses = useMemo(() => {
-    return {
-      sm: "text-base",
-      md: "text-base",
-      lg: "text-lg",
-      xl: "text-xl",
-    }[size];
-  }, [size]);
+  const selectedValue = value?.value;
 
-  const paddingClasses = useMemo(() => {
-    return {
-      sm: prefix ? "pl-8 pr-5" : "pl-2 pr-5",
-      md: prefix ? "pl-9 pr-5.5" : "pl-2.5 pr-5.5",
-      lg: prefix ? "pl-10 pr-6" : "pl-3 pr-6",
-      xl: prefix ? "pl-10 pr-6" : "pl-3 pr-6",
-    }[size];
-  }, [prefix, size]);
+  const selectedOption = useMemo(
+    () => options.find((opt) => opt.value === selectedValue),
+    [options, selectedValue]
+  );
 
-  const selectClasses = useMemo(() => {
-    const sizeClasses = {
-      sm: "rounded h-7",
-      md: "rounded h-8",
-      lg: "rounded-md h-10",
-      xl: "rounded-md h-10",
-    }[size];
+  return (
+    <div className={cn("w-full", className)}>
+      <BaseSelect.Root
+        value={selectedValue}
+        onValueChange={(val) => {
+          const selected = options.find((opt) => opt.value === val);
+          if (selected) {
+            onChange?.(selected);
+          }
+        }}
+        disabled={isDisabled}
+      >
+        <BaseSelect.Trigger
+          id={htmlId}
+          aria-invalid={state === "error"}
+          aria-busy={loading}
+          className={cn(
+            selectVariants({
+              size: size as SelectSize,
+              variant,
+              state: stateKey,
+              disabled: isDisabled,
+            })
+          )}
+        >
+          <div className="flex items-center gap-2 w-full overflow-hidden">
+            {prefix && (
+              <span className="flex-none text-ink-gray-6">{prefix}</span>
+            )}
 
-    const currentVariant = disabled ? "disabled" : variant;
-    const variantClasses = {
-      subtle:
-        "border border-surface-gray-2 bg-surface-gray-2 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3",
-      outline:
-        "border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3 focus:border-outline-gray-4 focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3",
-      ghost:
-        "bg-transparent border-transparent hover:bg-surface-gray-3 focus:bg-surface-gray-3 focus:border-outline-gray-4 focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3",
-      disabled: `border ${variant !== "ghost" ? "bg-surface-gray-1" : ""} ${
-        variant === "outline" ? "border-outline-gray-2" : "border-transparent"
-      }`,
-    }[currentVariant];
+            {selectedOption?.icon && (
+              <span className="flex-none text-ink-gray-6">
+                {selectedOption.icon}
+              </span>
+            )}
 
-    return `
-      ${sizeClasses}
-      ${fontSizeClasses}
-      ${paddingClasses}
-      ${variantClasses}
-      ${textColor}
-      transition-colors w-full py-0 truncate appearance-none cursor-pointer
-      focus:outline-none
-    `;
-  }, [size, fontSizeClasses, paddingClasses, disabled, variant, textColor]);
+            <span
+              className={cn(
+                "truncate flex-1 text-left",
+                !selectedOption && "text-ink-gray-5"
+              )}
+            >
+              {selectedOption ? selectedOption.label : placeholder}
+            </span>
+          </div>
 
-  const prefixClasses = useMemo(() => {
-    return {
-      sm: "pl-2",
-      md: "pl-2.5",
-      lg: "pl-3",
-      xl: "pl-3",
-    }[size];
-  }, [size]);
+          {loading ? (
+            <Loader2
+              aria-label="loading"
+              className="ml-2 h-4 w-4 animate-spin text-ink-gray-6"
+            />
+          ) : (
+            <span className="ml-2 flex-none text-ink-gray-6">
+              {suffix ?? <ChevronDown className="h-4 w-4" />}
+            </span>
+          )}
+        </BaseSelect.Trigger>
 
-  return (
-    <div className="relative flex items-center">
-      {prefix && (
-        <div
-          className={`absolute inset-y-0 left-0 flex items-center ${textColor} ${prefixClasses} pointer-events-none`}
-        >
-          {prefix?.(size)}
-        </div>
-      )}
-      {placeholder && !value && (
-        <div
-          className={`pointer-events-none absolute text-ink-gray-4 truncate w-full ${fontSizeClasses} ${paddingClasses}`}
-        >
-          {placeholder}
-        </div>
-      )}
-      <select
-        className={selectClasses}
-        disabled={disabled}
-        id={htmlId}
-        value={value}
-        onChange={handleChange}
-        data-testid="select"
-      >
-        {placeholder && !value && <option />}
-        {selectOptions.map((option) => (
-          <option
-            selected={option.value === value}
-            key={option.value}
-            value={option.value}
-            disabled={option.disabled}
+        <BaseSelect.Portal>
+          <BaseSelect.Positioner
+            side="bottom"
+            align="start"
+            sideOffset={4}
+            className="z-100"
           >
-            {option.label}
-          </option>
-        ))}
-      </select>
+            <BaseSelect.Popup className="min-w-[var(--anchor-width)] max-h-[15rem] overflow-y-auto rounded-lg bg-surface-modal p-1.5 shadow-2xl border border-outline-gray-1">
+              {options.map((option) => (
+                <BaseSelect.Item
+                  key={option.value}
+                  value={option.value}
+                  disabled={option.disabled}
+                  className={optionVariants()}
+                  data-testid="select-option"
+                >
+                  <span className="flex items-center gap-2 truncate text-ink-gray-7">
+                    {option.icon && (
+                      <span className="flex-none">{option.icon}</span>
+                    )}
+                    {option.label}
+                  </span>
+
+                  <BaseSelect.ItemIndicator>
+                    <Check className="h-4 w-4 text-ink-gray-7" />
+                  </BaseSelect.ItemIndicator>
+                </BaseSelect.Item>
+              ))}
+            </BaseSelect.Popup>
+          </BaseSelect.Positioner>
+        </BaseSelect.Portal>
+      </BaseSelect.Root>
     </div>
   );
 };
diff --git a/packages/frappe-ui-react/src/components/select/tests/select.tsx b/packages/frappe-ui-react/src/components/select/tests/select.tsx
deleted file mode 100644
index 974ba242..00000000
--- a/packages/frappe-ui-react/src/components/select/tests/select.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import Select from "../select";
-
-describe("Select", () => {
-  const options = [
-    { label: "Option 1", value: "1" },
-    { label: "Option 2", value: "2" },
-    { label: "Option 3", value: "3", disabled: true },
-  ];
-
-  it("renders all options", () => {
-    render(<Select options={options} value="" onChange={() => {}} />);
-    expect(screen.getByText("Option 1")).toBeInTheDocument();
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-    expect(screen.getByText("Option 3")).toBeInTheDocument();
-  });
-
-  it("renders with placeholder", () => {
-    render(
-      <Select
-        options={options}
-        value=""
-        placeholder="Select an option"
-        onChange={() => {}}
-      />
-    );
-    expect(screen.getByText("Select an option")).toBeInTheDocument();
-  });
-
-  it("renders with initial value", () => {
-    render(<Select options={options} value="2" onChange={() => {}} />);
-    expect(screen.getByDisplayValue("Option 2")).toBeInTheDocument();
-  });
-
-  it("calls onChange when selecting option", () => {
-    const handleChange = jest.fn();
-    render(<Select options={options} value="" onChange={handleChange} />);
-    fireEvent.change(screen.getByRole("combobox"), { target: { value: "1" } });
-    expect(handleChange).toHaveBeenCalled();
-  });
-
-  it("is disabled when disabled prop is true", () => {
-    render(<Select options={options} value="" onChange={() => {}} disabled />);
-    expect(screen.getByRole("combobox")).toBeDisabled();
-  });
-
-  it("renders with custom id", () => {
-    render(
-      <Select
-        options={options}
-        value=""
-        onChange={() => {}}
-        htmlId="custom-id"
-      />
-    );
-    expect(screen.getByRole("combobox")).toHaveAttribute("id", "custom-id");
-  });
-
-  it("renders prefix", () => {
-    const Prefix = () => <span>Prefix</span>;
-    render(
-      <Select
-        options={options}
-        value=""
-        onChange={() => {}}
-        prefix={() => <Prefix />}
-      />
-    );
-    expect(screen.getByText("Prefix")).toBeInTheDocument();
-  });
-
-  it("disables option when disabled prop is set", () => {
-    render(<Select options={options} value="" onChange={() => {}} />);
-    expect(screen.getByText("Option 3")).toBeDisabled();
-  });
-});
diff --git a/packages/frappe-ui-react/src/components/select/types.ts b/packages/frappe-ui-react/src/components/select/types.ts
index 6c66f3a1..18575ad9 100644
--- a/packages/frappe-ui-react/src/components/select/types.ts
+++ b/packages/frappe-ui-react/src/components/select/types.ts
@@ -1,23 +1,28 @@
 import type { ReactNode } from "react";
 
-export type SelectSize = "sm" | "md" | "lg" | "xl";
+export type SelectSize = "sm" | "md" | "lg";
 export type SelectVariant = "subtle" | "outline" | "ghost";
+export type SelectState = "success" | "warning" | "error";
 
 export interface SelectOption {
   value: string;
   label: string;
+  icon?: ReactNode;
   disabled?: boolean;
 }
 
 export interface SelectProps {
   size?: SelectSize;
   variant?: SelectVariant;
+  state?: SelectState;
+  loading?: boolean;
   disabled?: boolean;
-  value?: string;
+  value?: SelectOption;
   placeholder?: string;
-  options: (string | SelectOption)[];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  prefix?: (args?: any) => ReactNode;
+  options: SelectOption[];
+  prefix?: ReactNode;
+  suffix?: ReactNode;
   htmlId?: string;
-  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  onChange?: (value: SelectOption) => void;
+  className?: string;
 }