diff --git a/src/components/ui/TextInput.tsx b/src/components/ui/TextInput.tsx
new file mode 100644
index 0000000..0f7dd12
--- /dev/null
+++ b/src/components/ui/TextInput.tsx
@@ -0,0 +1,26 @@
+interface Props {
+  label: string; optional?: boolean;
+  value: string; onChange: (v: string) => void;
+  placeholder?: string; type?: string;
+}
+
+export function TextInput({ label, optional, value, onChange, placeholder, type = 'text' }: Props) {
+  return (
+    <div className="flex flex-col gap-2">
+      <label className="text-[15px] font-semibold flex items-center gap-1.5" style={{ color: 'var(--text-primary)' }}>
+        {label}
+        {optional && <span className="text-[13px] font-normal" style={{ color: 'var(--text-muted)' }}>(optional)</span>}
+      </label>
+      <input
+        type={type} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder}
+        className="h-12 px-4 rounded-[11px] text-[14px] outline-none transition-all"
+        style={{
+          background: 'var(--bg-input)', border: '1px solid var(--border-sub)',
+          color: 'var(--text-primary)',
+        }}
+        onFocus={e => { e.currentTarget.style.borderColor = '#7C6FE0'; e.currentTarget.style.boxShadow = '0 0 0 3px rgba(124,111,224,0.12)'; }}
+        onBlur={e => { e.currentTarget.style.borderColor = 'var(--border-sub)'; e.currentTarget.style.boxShadow = 'none'; }}
+      />
+    </div>
+  );
+}