+ {showLabel && (
+
+ )}
+
+ {prefix && (
+
{prefix}
+ )}
+
+ {targetComponent}
+
+ {suffix && (
+
{suffix}
+ )}
+
+ );
+}
diff --git a/components/lib/form/Select.tsx b/components/lib/form/Select.tsx
new file mode 100644
index 0000000..7ad4fa5
--- /dev/null
+++ b/components/lib/form/Select.tsx
@@ -0,0 +1,117 @@
+import { ChevronDown, LucideProps } from "lucide-react";
+import {
+ DetailedHTMLProps,
+ ForwardRefExoticComponent,
+ InputHTMLAttributes,
+ LabelHTMLAttributes,
+ RefAttributes,
+ RefObject,
+ SelectHTMLAttributes,
+} from "react";
+import { twMerge } from "tailwind-merge";
+
+type SelectOptionObject = {
+ title: string;
+ value: string;
+ default?: boolean;
+};
+
+type SelectOption = SelectOptionObject | SelectOptionObject[];
+
+/**
+ * # Select Element
+ * @className twui-select-wrapper
+ * @className twui-select
+ * @className twui-select-dropdown-icon
+ */
+export default function Select({
+ label,
+ options,
+ componentRef,
+ labelProps,
+ wrapperProps,
+ showLabel,
+ iconProps,
+ ...props
+}: DetailedHTMLProps<
+ SelectHTMLAttributes