diff --git a/.changeset/bright-drinks-run.md b/.changeset/bright-drinks-run.md
new file mode 100644
index 00000000000..00d98993851
--- /dev/null
+++ b/.changeset/bright-drinks-run.md
@@ -0,0 +1,7 @@
+---
+"@chakra-ui/theme": minor
+---
+
+The `Input` component now supports "xs" size. This change affects all components
+that extend from `Input`'s theme, such as `Select`, `PinInput`, `Textarea` or
+`NumberInput`.
diff --git a/packages/input/stories/input.stories.tsx b/packages/input/stories/input.stories.tsx
index 147bb215134..a40992add48 100644
--- a/packages/input/stories/input.stories.tsx
+++ b/packages/input/stories/input.stories.tsx
@@ -50,7 +50,7 @@ export const Controlled = () => {
 
 export const WithSizes = () => (
   <Stack align="start">
-    {["sm", "md", "lg"].map((size) => (
+    {["xs", "sm", "md", "lg"].map((size) => (
       <Input size={size} placeholder="This is an input component" />
     ))}
   </Stack>
diff --git a/packages/input/tests/__snapshots__/input.test.tsx.snap b/packages/input/tests/__snapshots__/input.test.tsx.snap
index a2458082e40..e27285554f0 100644
--- a/packages/input/tests/__snapshots__/input.test.tsx.snap
+++ b/packages/input/tests/__snapshots__/input.test.tsx.snap
@@ -16,8 +16,6 @@ exports[`Elements inside input render correctly 1`] = `
   width: 2.5rem;
   height: 2.5rem;
   font-size: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -101,8 +99,6 @@ exports[`Elements inside input render correctly 1`] = `
   width: 2.5rem;
   height: 2.5rem;
   font-size: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/number-input/stories/number-input.stories.tsx b/packages/number-input/stories/number-input.stories.tsx
index b4ffe89d302..68ba536b482 100644
--- a/packages/number-input/stories/number-input.stories.tsx
+++ b/packages/number-input/stories/number-input.stories.tsx
@@ -159,29 +159,15 @@ export const allowOutOfRange = () => (
 
 export const inputSizes = () => (
   <Stack>
-    <NumberInput size="sm" defaultValue={15} min={10}>
-      <NumberInputField />
-      <NumberInputStepper>
-        <NumberIncrementStepper />
-        <NumberDecrementStepper />
-      </NumberInputStepper>
-    </NumberInput>
-
-    <NumberInput size="md" defaultValue={15} min={10}>
-      <NumberInputField />
-      <NumberInputStepper>
-        <NumberIncrementStepper />
-        <NumberDecrementStepper />
-      </NumberInputStepper>
-    </NumberInput>
-
-    <NumberInput size="lg" defaultValue={15} min={10}>
-      <NumberInputField />
-      <NumberInputStepper>
-        <NumberIncrementStepper />
-        <NumberDecrementStepper />
-      </NumberInputStepper>
-    </NumberInput>
+    {["xs", "sm", "md", "lg"].map((size) => (
+      <NumberInput key={size} size={size} defaultValue={15} min={10}>
+        <NumberInputField />
+        <NumberInputStepper>
+          <NumberIncrementStepper />
+          <NumberDecrementStepper />
+        </NumberInputStepper>
+      </NumberInput>
+    ))}
   </Stack>
 )
 
diff --git a/packages/number-input/tests/__snapshots__/number-input.test.tsx.snap b/packages/number-input/tests/__snapshots__/number-input.test.tsx.snap
index e3c2cd906d1..063c53a6118 100644
--- a/packages/number-input/tests/__snapshots__/number-input.test.tsx.snap
+++ b/packages/number-input/tests/__snapshots__/number-input.test.tsx.snap
@@ -27,6 +27,7 @@ exports[`should render correctly 1`] = `
   padding-right: 1rem;
   height: 2.5rem;
   border-radius: 0.375rem;
+  vertical-align: top;
   border: 1px solid;
   border-color: inherit;
   background: inherit;
@@ -94,7 +95,7 @@ exports[`should render correctly 1`] = `
   border-left: 1px solid;
   border-color: inherit;
   color: inherit;
-  font-size: 10px;
+  font-size: calc(1rem * 0.75);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/pin-input/stories/pin-input.stories.tsx b/packages/pin-input/stories/pin-input.stories.tsx
index cbbc2e18039..dcd30344974 100644
--- a/packages/pin-input/stories/pin-input.stories.tsx
+++ b/packages/pin-input/stories/pin-input.stories.tsx
@@ -53,8 +53,8 @@ export function ComponentExample() {
 
 export const Sizes = () => (
   <>
-    {["sm", "md", "lg"].map((size, i) => (
-      <div key={i} style={{ marginBottom: "1rem" }}>
+    {["xs", "sm", "md", "lg"].map((size) => (
+      <div key={size} style={{ marginBottom: "1rem" }}>
         <PinInput size={size} defaultValue="234">
           <PinInputField />
           <PinInputField />
diff --git a/packages/select/src/select.tsx b/packages/select/src/select.tsx
index 3a4be7d9f63..6bc39ccb0bc 100644
--- a/packages/select/src/select.tsx
+++ b/packages/select/src/select.tsx
@@ -182,11 +182,8 @@ const IconWrapper = chakra("div", {
   baseStyle: {
     position: "absolute",
     display: "inline-flex",
-    width: "1.5rem",
-    height: "100%",
     alignItems: "center",
     justifyContent: "center",
-    right: "0.5rem",
     pointerEvents: "none",
     top: "50%",
     transform: "translateY(-50%)",
diff --git a/packages/select/stories/select.stories.tsx b/packages/select/stories/select.stories.tsx
index d46aafe4ef8..792ce3c692f 100644
--- a/packages/select/stories/select.stories.tsx
+++ b/packages/select/stories/select.stories.tsx
@@ -67,9 +67,9 @@ export const SelectVariants = () => (
 
 export const SelectSizes = () => (
   <Stack spacing={4}>
-    <Select placeholder="large size" size="lg" />
-    <Select placeholder="default size" size="md" />
-    <Select placeholder="small size" size="sm" />
+    {["xs", "sm", "md", "lg"].map((size) => (
+      <Select placeholder={`${size} size`} size={size} key={size} />
+    ))}
   </Stack>
 )
 
@@ -103,9 +103,9 @@ const UpDownIcon = (props: any) => (
   </svg>
 )
 
-export const SelectIcon = () => {
-  return <Select icon={<UpDownIcon />} placeholder="Placeholder" size="md" />
-}
+export const SelectIcon = () => (
+  <Select icon={<UpDownIcon />} placeholder="Placeholder" size="md" />
+)
 
 export const FocusAndErrorColors = () => (
   <Stack>
diff --git a/packages/textarea/stories/textarea.stories.tsx b/packages/textarea/stories/textarea.stories.tsx
index a1ba3071185..96bef29fc65 100644
--- a/packages/textarea/stories/textarea.stories.tsx
+++ b/packages/textarea/stories/textarea.stories.tsx
@@ -1,6 +1,6 @@
+import { chakra } from "@chakra-ui/system"
 import * as React from "react"
 import { Textarea } from "../src"
-import { chakra } from "@chakra-ui/system"
 
 export default {
   title: "Textarea",
@@ -29,6 +29,11 @@ export const invalid = () => (
 
 export const withSizes = () => (
   <>
+    <Textarea
+      size="xs"
+      placeholder="A sample placeholder"
+      defaultValue="This is a x-small textarea"
+    />
     <Textarea
       size="sm"
       placeholder="A sample placeholder"
diff --git a/packages/theme/package.json b/packages/theme/package.json
index d113612eb27..b4a51dd09ce 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -50,7 +50,8 @@
     "lint:types": "tsc --noEmit"
   },
   "dependencies": {
-    "@chakra-ui/theme-tools": "1.0.2"
+    "@chakra-ui/theme-tools": "1.0.2",
+    "@chakra-ui/utils": "1.0.2"
   },
   "peerDependencies": {
     "@chakra-ui/system": ">=1.0.0"
diff --git a/packages/theme/src/components/input.ts b/packages/theme/src/components/input.ts
index 1cb1a83176a..943666f83cc 100644
--- a/packages/theme/src/components/input.ts
+++ b/packages/theme/src/components/input.ts
@@ -15,27 +15,31 @@ const baseStyle = {
 const size = {
   lg: {
     fontSize: "lg",
-    pl: 4,
-    pr: 4,
+    px: 4,
     h: 12,
     borderRadius: "md",
   },
 
   md: {
     fontSize: "md",
-    pl: 4,
-    pr: 4,
+    px: 4,
     h: 10,
     borderRadius: "md",
   },
 
   sm: {
     fontSize: "sm",
-    pl: 3,
-    pr: 3,
+    px: 3,
     h: 8,
     borderRadius: "sm",
   },
+
+  xs: {
+    fontSize: "xs",
+    px: 2,
+    h: 6,
+    borderRadius: "sm",
+  },
 }
 
 const sizes = {
@@ -51,6 +55,10 @@ const sizes = {
     field: size.sm,
     addon: size.sm,
   },
+  xs: {
+    field: size.xs,
+    addon: size.xs,
+  },
 }
 
 function getDefaults(props: Record<string, any>) {
diff --git a/packages/theme/src/components/number-input.ts b/packages/theme/src/components/number-input.ts
index 3c96bca3c63..a1653b27b4b 100644
--- a/packages/theme/src/components/number-input.ts
+++ b/packages/theme/src/components/number-input.ts
@@ -1,5 +1,6 @@
 import { mode } from "@chakra-ui/theme-tools"
 import Input from "./input"
+import typography from "../foundations/typography"
 
 const parts = ["field", "stepper", "stepperGroup"]
 
@@ -32,19 +33,25 @@ const baseStyle = (props: Record<string, any>) => ({
   stepper: baseStyleStepper(props),
 })
 
-function getSize(size: "sm" | "md" | "lg") {
-  const sizeStyle = Input.sizes?.[size]
+function getSize(size: "xs" | "sm" | "md" | "lg") {
+  const sizeStyle = Input.sizes[size]
 
   const radius = {
     lg: "md",
     md: "md",
     sm: "sm",
+    xs: "sm",
   }
 
+  const resolvedFontSize = typography.fontSizes[sizeStyle.field.fontSize]
+
   return {
-    field: sizeStyle?.field,
+    field: {
+      ...sizeStyle.field,
+      verticalAlign: "top",
+    },
     stepper: {
-      fontSize: size === "lg" ? "14px" : "10px",
+      fontSize: `calc(${resolvedFontSize} * 0.75)`,
       _first: {
         borderTopRightRadius: radius[size],
       },
@@ -58,6 +65,7 @@ function getSize(size: "sm" | "md" | "lg") {
 }
 
 const sizes = {
+  xs: getSize("xs"),
   sm: getSize("sm"),
   md: getSize("md"),
   lg: getSize("lg"),
diff --git a/packages/theme/src/components/pin-input.ts b/packages/theme/src/components/pin-input.ts
index 0d6388350bf..ae391fcbb9b 100644
--- a/packages/theme/src/components/pin-input.ts
+++ b/packages/theme/src/components/pin-input.ts
@@ -26,6 +26,12 @@ const sizes = {
     h: 8,
     borderRadius: "sm",
   },
+  xs: {
+    fontSize: "xs",
+    w: 6,
+    h: 6,
+    borderRadius: "sm",
+  },
 }
 
 const variants = {
diff --git a/packages/theme/src/components/select.ts b/packages/theme/src/components/select.ts
index 46f45a073ce..ad79a108581 100644
--- a/packages/theme/src/components/select.ts
+++ b/packages/theme/src/components/select.ts
@@ -1,8 +1,7 @@
 import { mode } from "@chakra-ui/theme-tools"
+import { mergeWith as merge } from "@chakra-ui/utils"
 import Input from "./input"
 
-const { sizes, defaultProps, variants } = Input
-
 const parts = ["field", "icon"]
 
 function baseStyleField(props: Record<string, any>) {
@@ -17,21 +16,35 @@ function baseStyleField(props: Record<string, any>) {
   }
 }
 
-const baseStyleInput = {
+const baseStyleIcon = {
+  width: "1.5rem",
+  height: "100%",
+  right: "0.5rem",
+  position: "relative",
   color: "currentColor",
   fontSize: "1.25rem",
-  _disabled: { opacity: 0.5 },
+  _disabled: {
+    opacity: 0.5,
+  },
 }
 
 const baseStyle = (props: Record<string, any>) => ({
   field: baseStyleField(props),
-  icon: baseStyleInput,
+  icon: baseStyleIcon,
+})
+
+const sizes = merge({}, Input.sizes, {
+  xs: {
+    icon: {
+      right: "0.25rem",
+    },
+  },
 })
 
 export default {
   parts,
   baseStyle,
   sizes,
-  variants,
-  defaultProps,
+  variants: Input.variants,
+  defaultProps: Input.defaultProps,
 }
diff --git a/packages/theme/src/components/textarea.ts b/packages/theme/src/components/textarea.ts
index 585c55e3cef..e5d05b5e16f 100644
--- a/packages/theme/src/components/textarea.ts
+++ b/packages/theme/src/components/textarea.ts
@@ -17,6 +17,7 @@ const variants = {
 }
 
 const sizes = {
+  xs: Input.sizes.xs.field,
   sm: Input.sizes.sm.field,
   md: Input.sizes.md.field,
   lg: Input.sizes.lg.field,
diff --git a/website/pages/docs/form/input.mdx b/website/pages/docs/form/input.mdx
index f144f7c4bfa..8442b09a09f 100644
--- a/website/pages/docs/form/input.mdx
+++ b/website/pages/docs/form/input.mdx
@@ -32,17 +32,19 @@ Here's a basic usage example of the `Input` component:
 
 ### Changing the size of the Input
 
-There are three sizes of an Input:
+The `Input` component comes in four sizes. The default is `md`.
 
-- `sm` (`24px`)
-- `md` (`32px`)
-- `lg` (`40px`)
+- `xs` (`24px`)
+- `sm` (`32px`)
+- `md` (`40px`)
+- `lg` (`48px`)
 
 ```jsx
 <Stack spacing={3}>
-  <Input placeholder="large size" size="lg" />
-  <Input placeholder="default size" size="md" />
+  <Input placeholder="extra small size" size="xs" />
   <Input placeholder="small size" size="sm" />
+  <Input placeholder="medium size" size="md" />
+  <Input placeholder="large size" size="lg" />
 </Stack>
 ```
 
diff --git a/website/pages/docs/form/number-input.mdx b/website/pages/docs/form/number-input.mdx
index 8dd303e0fa6..320434d9ac7 100644
--- a/website/pages/docs/form/number-input.mdx
+++ b/website/pages/docs/form/number-input.mdx
@@ -182,7 +182,7 @@ the input.
 
 ```jsx
 <Stack shouldWrapChildren direction="row">
-  <NumberInput size="sm" defaultValue={15} min={10}>
+  <NumberInput size="xs" maxW={16} defaultValue={15} min={10}>
     <NumberInputField />
     <NumberInputStepper>
       <NumberIncrementStepper />
@@ -190,7 +190,7 @@ the input.
     </NumberInputStepper>
   </NumberInput>
 
-  <NumberInput size="md" defaultValue={15} min={10}>
+  <NumberInput size="sm" maxW={20} defaultValue={15} min={10}>
     <NumberInputField />
     <NumberInputStepper>
       <NumberIncrementStepper />
@@ -198,7 +198,15 @@ the input.
     </NumberInputStepper>
   </NumberInput>
 
-  <NumberInput size="lg" defaultValue={15} min={10}>
+  <NumberInput size="md" maxW={24} defaultValue={15} min={10}>
+    <NumberInputField />
+    <NumberInputStepper>
+      <NumberIncrementStepper />
+      <NumberDecrementStepper />
+    </NumberInputStepper>
+  </NumberInput>
+
+  <NumberInput size="lg" maxW={32} defaultValue={15} min={10}>
     <NumberInputField />
     <NumberInputStepper>
       <NumberIncrementStepper />
diff --git a/website/pages/docs/form/pin-input.mdx b/website/pages/docs/form/pin-input.mdx
index ced4dcf9b37..90dfc40e101 100644
--- a/website/pages/docs/form/pin-input.mdx
+++ b/website/pages/docs/form/pin-input.mdx
@@ -81,43 +81,48 @@ Pass the `mask` prop to `PinInput` to achieve this.
 </HStack>
 ```
 
-### Changing the size of the Input
+### Changing the size of the PinInput
 
-There are three sizes of an Input:
+The `PinInput` component comes in four sizes. The default is `md`.
 
-- `sm` (`24px`)
-- `md` (`32px`)
-- `lg` (`40px`)
+- `xs` (`24px`)
+- `sm` (`32px`)
+- `md` (`40px`)
+- `lg` (`48px`)
 
 ```jsx
 <Stack>
-  <Box>
-    <HStack>
-      <PinInput size="lg">
-        <PinInputField />
-        <PinInputField />
-        <PinInputField />
-      </PinInput>
-    </HStack>
-  </Box>
-  <Box>
-    <HStack>
-      <PinInput size="md">
-        <PinInputField />
-        <PinInputField />
-        <PinInputField />
-      </PinInput>
-    </HStack>
-  </Box>
-  <Box>
-    <HStack>
-      <PinInput size="sm">
-        <PinInputField />
-        <PinInputField />
-        <PinInputField />
-      </PinInput>
-    </HStack>
-  </Box>
+  <HStack>
+    <PinInput size="xs">
+      <PinInputField />
+      <PinInputField />
+      <PinInputField />
+    </PinInput>
+  </HStack>
+
+  <HStack>
+    <PinInput size="sm">
+      <PinInputField />
+      <PinInputField />
+      <PinInputField />
+    </PinInput>
+  </HStack>
+
+  <HStack>
+    <PinInput size="md">
+      <PinInputField />
+      <PinInputField />
+      <PinInputField />
+    </PinInput>
+  </HStack>
+
+  <HStack>
+    <PinInput size="lg">
+      <PinInputField />
+      <PinInputField />
+      <PinInputField />
+    </PinInput>
+  </HStack>
 </Stack>
 ```
 
diff --git a/website/pages/docs/form/select.mdx b/website/pages/docs/form/select.mdx
index b76921f1df0..e66d911f8e3 100644
--- a/website/pages/docs/form/select.mdx
+++ b/website/pages/docs/form/select.mdx
@@ -33,14 +33,19 @@ Here's a basic usage of the `Select` component.
 
 ### Changing the size of the Select
 
-The`Select` component cones in three sizes : large (48px), default (40px) and
-small (32px).
+The `Select` component comes in four sizes. The default is `md`.
+
+- `xs` (`24px`)
+- `sm` (`32px`)
+- `md` (`40px`)
+- `lg` (`48px`)
 
 ```jsx
 <Stack spacing={3}>
-  <Select placeholder="large size" size="lg" />
-  <Select placeholder="default size" size="md" />
+  <Select placeholder="extra small size" size="xs" />
   <Select placeholder="small size" size="sm" />
+  <Select placeholder="medium size" size="md" />
+  <Select placeholder="large size" size="lg" />
 </Stack>
 ```