Select: default creatable behavior trims input when onCreateOption is omitted

apps/docs/src/remix-hook-form/select.stories.tsx

@@ -530,11 +530,10 @@ const CreatableSelectExample = () => {
         <Select
           name="region"
           label="Custom Region"
-          description="Creatable option enabled"
+          description="Creatable option enabled (defaults to trimming the input and using it as label/value)"
           options={[...US_STATES.slice(0, 5), ...CANADA_PROVINCES.slice(0, 5)]}
           placeholder="Select a custom region"
           creatable
-          onCreateOption={async (input) => ({ label: input, value: input })}
         />
         <Button type="submit">Submit</Button>
         {fetcher.data?.selectedRegion && (

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambdacurry/forms",
-  "version": "0.22.3",
+  "version": "0.22.4",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

packages/components/src/ui/select.tsx

@@ -251,8 +251,12 @@ export function Select<T extends React.Key = string>({
                       value={q}
                       role="option"
                       onSelect={async () => {
-                        if (!onCreateOption) return;
-                        const created = await onCreateOption(q);
+                        const defaultCreate = (input: string): SelectOption<T> => {
+                          const normalized = input.trim();
+                          // Keep value as a string; schema can coerce on submit if needed
+                          return { label: normalized, value: normalized as unknown as T };
+                        };
+                        const created = await Promise.resolve((onCreateOption ?? defaultCreate)(q));
                         onValueChange?.(created.value);
                         popoverState.close();
                       }}