diff --git a/src/input/InputBase.tsx b/src/input/InputBase.tsx
index b458bfdd..813643a5 100644
--- a/src/input/InputBase.tsx
+++ b/src/input/InputBase.tsx
@@ -17,21 +17,20 @@ export const useInputBase = createHook<InputBaseOptions>(
     const theme = useTheme("input");
     const className = cx(
       theme.base,
-      size ? theme.size[size].base.default : "",
-      size && (!prefix || !suffix) ? theme.size[size].base.withoutAddon : "",
-      variant ? theme.variant[variant].default : "",
-      props.disabled || invalid
+      size ? theme.size[size]?.base?.default : "",
+      size && (!prefix || !suffix) ? theme.size[size]?.base?.withoutAddon : "",
+      props.disabled
         ? ""
         : variant
         ? cx(
-            theme.variant[variant].default.base,
-            theme.variant[variant].hover.base,
-            theme.variant[variant].active.base,
-            theme.variant[variant].focus.base,
+            theme.variant[variant]?.default?.base,
+            theme.variant[variant]?.hover?.base,
+            theme.variant[variant]?.active?.base,
+            theme.variant[variant]?.focus?.base,
+            invalid ? theme.variant[variant]?.invalid?.base : "",
           )
         : "",
-      variant && props.disabled ? theme.variant[variant].disabled.base : "",
-      variant && invalid ? theme.variant[variant].invalid.base : "",
+      variant && props.disabled ? theme.variant[variant]?.disabled?.base : "",
       props.className,
     );
 
diff --git a/src/input/InputPrefix.tsx b/src/input/InputPrefix.tsx
index 362b5f02..8951dde2 100644
--- a/src/input/InputPrefix.tsx
+++ b/src/input/InputPrefix.tsx
@@ -28,8 +28,7 @@ export const useInputPrefix = createHook<InputPrefixOptions>(
     const className = cx(
       theme.prefix,
       size ? theme.size[size].prefix : "",
-      variant ? theme.variant[variant].default : "",
-      disabled || invalid
+      disabled
         ? ""
         : variant
         ? cx(
@@ -37,10 +36,10 @@ export const useInputPrefix = createHook<InputPrefixOptions>(
             theme.variant[variant].hover.prefix,
             theme.variant[variant].active.prefix,
             theme.variant[variant].focus.prefix,
+            invalid ? theme.variant[variant].invalid.prefix : "",
           )
         : "",
       variant && disabled ? theme.variant[variant].disabled.prefix : "",
-      variant && invalid ? theme.variant[variant].invalid.prefix : "",
       props.className,
     );
 
diff --git a/src/input/InputSuffix.tsx b/src/input/InputSuffix.tsx
index 38138feb..82503731 100644
--- a/src/input/InputSuffix.tsx
+++ b/src/input/InputSuffix.tsx
@@ -28,8 +28,7 @@ export const useInputSuffix = createHook<InputSuffixOptions>(
     const className = cx(
       theme.suffix,
       size ? theme.size[size].suffix : "",
-      variant ? theme.variant[variant].default : "",
-      disabled || invalid
+      disabled
         ? ""
         : variant
         ? cx(
@@ -37,10 +36,10 @@ export const useInputSuffix = createHook<InputSuffixOptions>(
             theme.variant[variant].hover.suffix,
             theme.variant[variant].active.suffix,
             theme.variant[variant].focus.suffix,
+            invalid ? theme.variant[variant].invalid.suffix : "",
           )
         : "",
       variant && disabled ? theme.variant[variant].disabled.suffix : "",
-      variant && invalid ? theme.variant[variant].invalid.suffix : "",
       props.className,
     );
 
diff --git a/src/input/stories/InputBasic.stories.tsx b/src/input/stories/InputBasic.stories.tsx
index b89517ca..53169363 100644
--- a/src/input/stories/InputBasic.stories.tsx
+++ b/src/input/stories/InputBasic.stories.tsx
@@ -14,23 +14,20 @@ export default {
   title: "Forms/Input/Basic",
   component: InputBasic,
   argTypes: {
-    label: { control: { type: "text" } },
-    description: { control: { type: "text" } },
-    ...createControls(undefined, {
+    ...createControls("input", {
       ignore: [
-        "unstable_system",
-        "unstable_clickOnEnter",
-        "unstable_clickOnSpace",
+        "ref",
         "wrapElement",
-        "focusable",
         "as",
-        "setState",
-        "checked",
-        "value",
-        "defaultState",
-        "state",
-        "onStateChange",
-        "icon",
+        "prefix",
+        "suffix",
+        "spinner",
+        "autoFocus",
+        "focusable",
+        "accessibleWhenDisabled",
+        "onFocusVisible",
+        "clickOnEnter",
+        "clickOnSpace",
       ],
     }),
   },
@@ -42,69 +39,78 @@ export default {
 } as Meta;
 
 export const Default: Story = {
-  args: {},
+  args: { size: "md", variant: "outline" },
 };
 
 export const WithPlaceholder: Story = {
-  args: { placeholder: "Search" },
+  ...Default,
+  args: { ...Default.args, placeholder: "Search" },
 };
 
 export const Small: Story = {
-  args: { size: "sm", placeholder: "Search" },
+  ...Default,
+  args: { ...Default.args, size: "sm", placeholder: "Search" },
 };
 
 export const Medium: Story = {
-  args: { size: "md", placeholder: "Search" },
+  ...Default,
+  args: { ...Default.args, size: "md", placeholder: "Search" },
 };
 
 export const Large: Story = {
-  args: { size: "lg", placeholder: "Search" },
+  ...Default,
+  args: { ...Default.args, size: "lg", placeholder: "Search" },
 };
 
 export const ExtraLarge: Story = {
-  args: { size: "xl", placeholder: "Search" },
+  ...Default,
+  args: { ...Default.args, size: "xl", placeholder: "Search" },
 };
 
 export const Outline: Story = {
-  args: { variant: "outline", placeholder: "Search" },
+  ...Default,
+  args: { ...Default.args, variant: "outline", placeholder: "Search" },
 };
 
 export const Subtle: Story = {
-  args: { variant: "subtle", placeholder: "Search" },
+  ...Default,
+  args: { ...Default.args, variant: "subtle", placeholder: "Search" },
 };
 
 export const Underline: Story = {
-  args: { variant: "underline", placeholder: "Search" },
+  ...Default,
+  args: { ...Default.args, variant: "underline", placeholder: "Search" },
 };
 
 export const Ghost: Story = {
-  args: { variant: "ghost", placeholder: "Search" },
+  ...Default,
+  args: { ...Default.args, variant: "ghost", placeholder: "Search" },
 };
 
 export const Disabled: Story = {
-  args: { placeholder: "Search", disabled: true },
+  ...Default,
+  args: { ...Default.args, placeholder: "Search", disabled: true },
 };
 
 export const Invalid: Story = {
-  args: { placeholder: "Search", invalid: true },
+  ...Default,
+  args: { ...Default.args, placeholder: "Search", invalid: true },
 };
 
 export const Prefix: Story = {
-  args: {
-    placeholder: "Search",
-    prefix: <SlotIcon />,
-  },
+  ...Default,
+  args: { ...Default.args, placeholder: "Search", prefix: <SlotIcon /> },
 };
 
 export const Suffix: Story = {
-  args: {
-    placeholder: "Search",
-    suffix: <SlotIcon />,
-  },
+  ...Default,
+  args: { ...Default.args, placeholder: "Search", suffix: <SlotIcon /> },
 };
 
 export const PrefixSuffix: Story = {
+  ...Default,
   args: {
+    ...Default.args,
     placeholder: "Search",
     prefix: <SlotIcon />,
     suffix: <SlotIcon />,
@@ -112,5 +118,6 @@ export const PrefixSuffix: Story = {
 };
 
 export const Loading: Story = {
-  args: { placeholder: "Search", loading: true },
+  ...Default,
+  args: { ...Default.args, placeholder: "Search", loading: true },
 };
diff --git a/src/input/stories/InputStack.stories.tsx b/src/input/stories/InputStack.stories.tsx
index 344aaf08..f046ef4c 100644
--- a/src/input/stories/InputStack.stories.tsx
+++ b/src/input/stories/InputStack.stories.tsx
@@ -14,23 +14,22 @@ export default {
   title: "Forms/Input/Stack",
   component: InputStack,
   argTypes: {
-    label: { control: { type: "text" } },
-    description: { control: { type: "text" } },
-    ...createControls(undefined, {
+    ...createControls("input", {
       ignore: [
-        "unstable_system",
-        "unstable_clickOnEnter",
-        "unstable_clickOnSpace",
+        "ref",
         "wrapElement",
-        "focusable",
         "as",
-        "setState",
-        "checked",
-        "value",
-        "defaultState",
-        "state",
-        "onStateChange",
-        "icon",
+        "prefix",
+        "suffix",
+        "spinner",
+        "autoFocus",
+        "focusable",
+        "accessibleWhenDisabled",
+        "onFocusVisible",
+        "clickOnEnter",
+        "clickOnSpace",
+        "size",
+        "variant",
       ],
     }),
   },
diff --git a/src/select/SelectBase.tsx b/src/select/SelectBase.tsx
index ddf1421f..9ad6ab80 100644
--- a/src/select/SelectBase.tsx
+++ b/src/select/SelectBase.tsx
@@ -17,21 +17,20 @@ export const useSelectBase = createHook<SelectBaseOptions>(
     const theme = useTheme("select");
     const className = cx(
       theme.base,
-      size ? theme.size[size].base.default : "",
-      size && (!prefix || !suffix) ? theme.size[size].base.withoutAddon : "",
-      variant ? theme.variant[variant].default : "",
-      props.disabled || invalid
+      size ? theme.size[size]?.base?.default : "",
+      size && (!prefix || !suffix) ? theme.size[size]?.base?.withoutAddon : "",
+      props.disabled
         ? ""
         : variant
         ? cx(
-            theme.variant[variant].default.base,
-            theme.variant[variant].hover.base,
-            theme.variant[variant].active.base,
-            theme.variant[variant].focus.base,
+            theme.variant[variant]?.default?.base,
+            theme.variant[variant]?.hover?.base,
+            theme.variant[variant]?.active?.base,
+            theme.variant[variant]?.focus?.base,
+            invalid ? theme.variant[variant]?.invalid?.base : "",
           )
         : "",
-      variant && props.disabled ? theme.variant[variant].disabled.base : "",
-      variant && invalid ? theme.variant[variant].invalid.base : "",
+      variant && props.disabled ? theme.variant[variant]?.disabled?.base : "",
       props.className,
     );
 
diff --git a/src/select/SelectPrefix.tsx b/src/select/SelectPrefix.tsx
index 5a872dbf..2a96a064 100644
--- a/src/select/SelectPrefix.tsx
+++ b/src/select/SelectPrefix.tsx
@@ -28,8 +28,7 @@ export const useSelectPrefix = createHook<SelectPrefixOptions>(
     const className = cx(
       theme.prefix,
       size ? theme.size[size].prefix : "",
-      variant ? theme.variant[variant].default : "",
-      disabled || invalid
+      disabled
         ? ""
         : variant
         ? cx(
@@ -37,10 +36,10 @@ export const useSelectPrefix = createHook<SelectPrefixOptions>(
             theme.variant[variant].hover.prefix,
             theme.variant[variant].active.prefix,
             theme.variant[variant].focus.prefix,
+            invalid ? theme.variant[variant].invalid.prefix : "",
           )
         : "",
       variant && disabled ? theme.variant[variant].disabled.prefix : "",
-      variant && invalid ? theme.variant[variant].invalid.prefix : "",
       props.className,
     );
 
diff --git a/src/select/SelectSuffix.tsx b/src/select/SelectSuffix.tsx
index 2e6fb90e..b8990663 100644
--- a/src/select/SelectSuffix.tsx
+++ b/src/select/SelectSuffix.tsx
@@ -27,20 +27,19 @@ export const useSelectSuffix = createHook<SelectSuffixOptions>(
     const theme = useTheme("select");
     const className = cx(
       theme.suffix,
-      size ? theme.size[size].suffix : "",
-      variant ? theme.variant[variant].default : "",
-      disabled || invalid
+      size ? theme.size[size]?.suffix : "",
+      disabled
         ? ""
         : variant
         ? cx(
-            theme.variant[variant].default.suffix,
-            theme.variant[variant].hover.suffix,
-            theme.variant[variant].active.suffix,
-            theme.variant[variant].focus.suffix,
+            theme.variant[variant]?.default?.suffix,
+            theme.variant[variant]?.hover?.suffix,
+            theme.variant[variant]?.active?.suffix,
+            theme.variant[variant]?.focus?.suffix,
+            invalid ? theme.variant[variant]?.invalid?.suffix : "",
           )
         : "",
-      variant && disabled ? theme.variant[variant].disabled.suffix : "",
-      variant && invalid ? theme.variant[variant].invalid.suffix : "",
+      variant && disabled ? theme.variant[variant]?.disabled?.suffix : "",
       props.className,
     );
 
diff --git a/src/select/stories/SelectBasic.stories.tsx b/src/select/stories/SelectBasic.stories.tsx
index 098a8b3d..a558aa7f 100644
--- a/src/select/stories/SelectBasic.stories.tsx
+++ b/src/select/stories/SelectBasic.stories.tsx
@@ -14,23 +14,20 @@ export default {
   title: "Forms/Select/Basic",
   component: SelectBasic,
   argTypes: {
-    label: { control: { type: "text" } },
-    description: { control: { type: "text" } },
-    ...createControls(undefined, {
+    ...createControls("select", {
       ignore: [
-        "unstable_system",
-        "unstable_clickOnEnter",
-        "unstable_clickOnSpace",
+        "ref",
         "wrapElement",
-        "focusable",
         "as",
-        "setState",
-        "checked",
-        "value",
-        "defaultState",
-        "state",
-        "onStateChange",
-        "icon",
+        "prefix",
+        "suffix",
+        "spinner",
+        "autoFocus",
+        "focusable",
+        "accessibleWhenDisabled",
+        "onFocusVisible",
+        "clickOnEnter",
+        "clickOnSpace",
       ],
     }),
   },
@@ -42,55 +39,85 @@ export default {
 } as Meta;
 
 export const Default: Story = {
-  args: {},
+  args: { size: "md", variant: "outline" },
+};
+
+export const WithPlaceholder: Story = {
+  ...Default,
+  args: { ...Default.args, placeholder: "Search" },
 };
 
 export const Small: Story = {
-  args: { size: "sm" },
+  ...Default,
+  args: { ...Default.args, size: "sm", placeholder: "Search" },
 };
 
 export const Medium: Story = {
-  args: { size: "md" },
+  ...Default,
+  args: { ...Default.args, size: "md", placeholder: "Search" },
 };
 
 export const Large: Story = {
-  args: { size: "lg" },
+  ...Default,
+  args: { ...Default.args, size: "lg", placeholder: "Search" },
 };
 
 export const ExtraLarge: Story = {
-  args: { size: "xl" },
+  ...Default,
+  args: { ...Default.args, size: "xl", placeholder: "Search" },
 };
 
 export const Outline: Story = {
-  args: { variant: "outline" },
+  ...Default,
+  args: { ...Default.args, variant: "outline", placeholder: "Search" },
 };
 
 export const Subtle: Story = {
-  args: { variant: "subtle" },
+  ...Default,
+  args: { ...Default.args, variant: "subtle", placeholder: "Search" },
 };
 
 export const Underline: Story = {
-  args: { variant: "underline" },
+  ...Default,
+  args: { ...Default.args, variant: "underline", placeholder: "Search" },
 };
 
 export const Ghost: Story = {
-  args: { variant: "ghost" },
+  ...Default,
+  args: { ...Default.args, variant: "ghost", placeholder: "Search" },
 };
 
 export const Disabled: Story = {
-  args: { disabled: true },
+  ...Default,
+  args: { ...Default.args, placeholder: "Search", disabled: true },
 };
 
 export const Invalid: Story = {
-  args: { invalid: true },
+  ...Default,
+  args: { ...Default.args, placeholder: "Search", invalid: true },
 };
 
 export const Prefix: Story = {
+  ...Default,
+  args: { ...Default.args, placeholder: "Search", prefix: <SlotIcon /> },
+};
+
+export const Suffix: Story = {
+  ...Default,
+  args: { ...Default.args, placeholder: "Search", suffix: <SlotIcon /> },
+};
+
+export const PrefixSuffix: Story = {
+  ...Default,
   args: {
+    ...Default.args,
+    placeholder: "Search",
     prefix: <SlotIcon />,
+    suffix: <SlotIcon />,
   },
 };
 
 export const Loading: Story = {
-  args: { loading: true, prefix: <SlotIcon /> },
+  ...Default,
+  args: { ...Default.args, placeholder: "Search", loading: true },
 };
diff --git a/src/select/stories/SelectStack.stories.tsx b/src/select/stories/SelectStack.stories.tsx
index df0ef819..aca0aeea 100644
--- a/src/select/stories/SelectStack.stories.tsx
+++ b/src/select/stories/SelectStack.stories.tsx
@@ -14,23 +14,22 @@ export default {
   title: "Forms/Select/Stack",
   component: SelectStack,
   argTypes: {
-    label: { control: { type: "text" } },
-    description: { control: { type: "text" } },
-    ...createControls(undefined, {
+    ...createControls("select", {
       ignore: [
-        "unstable_system",
-        "unstable_clickOnEnter",
-        "unstable_clickOnSpace",
+        "ref",
         "wrapElement",
-        "focusable",
         "as",
-        "setState",
-        "checked",
-        "value",
-        "defaultState",
-        "state",
-        "onStateChange",
-        "icon",
+        "prefix",
+        "suffix",
+        "spinner",
+        "autoFocus",
+        "focusable",
+        "accessibleWhenDisabled",
+        "onFocusVisible",
+        "clickOnEnter",
+        "clickOnSpace",
+        "size",
+        "variant",
       ],
     }),
   },
@@ -42,29 +41,23 @@ export default {
 } as Meta;
 
 export const Default: Story = {
-  args: {},
-};
-
-export const Disabled: Story = {
-  args: { disabled: true },
+  args: { placeholder: "Search" },
 };
 
 export const Invalid: Story = {
-  args: { invalid: true },
-};
-
-export const Loading: Story = {
-  args: { loading: true },
+  args: { placeholder: "Search", invalid: true },
 };
 
 export const Prefix: Story = {
   args: {
+    placeholder: "Search",
     prefix: <SlotIcon />,
   },
 };
 
 export const PrefixDisabled: Story = {
   args: {
+    placeholder: "Search",
     prefix: <SlotIcon />,
     disabled: true,
   },
@@ -72,14 +65,67 @@ export const PrefixDisabled: Story = {
 
 export const PrefixInvalid: Story = {
   args: {
+    placeholder: "Search",
+    prefix: <SlotIcon />,
+    suffix: <SlotIcon />,
+    invalid: true,
+  },
+};
+
+export const Suffix: Story = {
+  args: {
+    placeholder: "Search",
+    suffix: <SlotIcon />,
+  },
+};
+
+export const SuffixDisabled: Story = {
+  args: {
+    placeholder: "Search",
+    suffix: <SlotIcon />,
+    disabled: true,
+  },
+};
+
+export const SuffixInvalid: Story = {
+  args: {
+    placeholder: "Search",
+    suffix: <SlotIcon />,
+    invalid: true,
+  },
+};
+
+export const PrefixSuffix: Story = {
+  args: {
+    placeholder: "Search",
+    prefix: <SlotIcon />,
+    suffix: <SlotIcon />,
+  },
+};
+
+export const PrefixSuffixDisabled: Story = {
+  args: {
+    placeholder: "Search",
+    prefix: <SlotIcon />,
+    suffix: <SlotIcon />,
+    disabled: true,
+  },
+};
+
+export const PrefixSuffixInvalid: Story = {
+  args: {
+    placeholder: "Search",
     prefix: <SlotIcon />,
+    suffix: <SlotIcon />,
     invalid: true,
   },
 };
 
-export const PrefixLoading: Story = {
+export const PrefixSuffixLoading: Story = {
   args: {
+    placeholder: "Search",
     prefix: <SlotIcon />,
+    suffix: <SlotIcon />,
     loading: true,
   },
 };
diff --git a/src/theme/defaultTheme/select.ts b/src/theme/defaultTheme/select.ts
index 8b9a8b7a..0b21bb59 100644
--- a/src/theme/defaultTheme/select.ts
+++ b/src/theme/defaultTheme/select.ts
@@ -1,4 +1,4 @@
-export const input = {
+export const select = {
   wrapper: "relative inline-flex",
   base: "peer w-full inline-flex items-center justify-center appearance-none outline-none disabled:cursor-not-allowed disabled:select-none transition",
   prefix: